Improve conversations block integration to close #200 (#202)

* Improve compatibility for Conversations block

* Adjust highlighted comment color for better contrast

* Small improvements

* Adjust conversations and replies bg color

* Minor improvements for comments navigation

* Improve comments font sizes and spacing

* Revert change to input colors and remove box shadow on hidden input

* Minor adjustments for comment dropdown and notification styling

* Improve spacing for labels

* Improve font sizes and some spacings

* Add option to enable Sharing button on articles

* Adjust notification width on mobiles

* Small adjustments and tweaks

* Remove is_page if

* Small fix for button alignment inside media card

Co-authored-by: Razvan <[email protected]>

comments.php

@@ -16,6 +16,8 @@
 	return;
 } ?>
 
-<div class="entry-content">
-    <?php echo do_blocks( '<!-- wp:novablocks/post-comments --><!-- /wp:novablocks/post-comments -->' ); ?>
+<div class="comments-area">
+    <div class="entry-content">
+        <?php echo do_blocks( '<!-- wp:novablocks/post-comments --><!-- /wp:novablocks/post-comments -->' ); ?>
+    </div>
 </div>

dist/css/blocks/common-rtl.css

@@ -99,6 +99,9 @@
       margin-left: 0; }
   .wp-block-buttons[class][class][class] .wp-block-button__link[class] {
     display: block; }
+  .wp-block-buttons[class][class][class] > .wp-block {
+    margin-right: 0;
+    margin-left: 0; }
 
 /* Columns Blocks */
 .wp-block-columns[class]:not(:first-child),

dist/css/blocks/common.css

@@ -99,6 +99,9 @@
       margin-right: 0; }
   .wp-block-buttons[class][class][class] .wp-block-button__link[class] {
     display: block; }
+  .wp-block-buttons[class][class][class] > .wp-block {
+    margin-left: 0;
+    margin-right: 0; }
 
 /* Columns Blocks */
 .wp-block-columns[class]:not(:first-child),

dist/css/blocks/nova-blocks/conversations-rtl.css

@@ -0,0 +1,313 @@
+.novablocks-conversations {
+  --avatar-column-size: 2.8rem;
+  --comments-grid-gap: 1.4rem;
+  --component-accent-color: var(--current-color-primary);
+  --novablocks-conversations-width: 48em;
+  --field-description-color: var(--current-dark-primary);
+  --conversations-bg-color: var(--current-light-primary);
+  --conversations-reply-bg-color: var(--current-light-tertiary);
+  --comment-author-color: var(--component-accent-color);
+  --comment-links-color: var(--component-accent-color);
+  --comment-highlighted-color: #FFF2CE;
+  --comment-font-size: calc(var(--theme-body-final-font-size) * 1.05);
+  --label-font-size: var(--final-font-size);
+  --label-bg-color: var(--current-dark-primary);
+  --label-highlighted-bg-color: var(--theme-dark-primary);
+  --label-border-radius: 999em;
+  --comment-footer-font-size: var(--final-font-size);
+  --field-description-font-size: var(--final-font-size);
+  --novablocks-spacing: var(--theme-spacing-fluid-medium); }
+  .novablocks-conversations .comment-list[class] {
+    --novablocks-element-spacing-multiplier: 1.5; }
+  .novablocks-conversations .comment-footer-meta[class] * {
+    font-size: inherit; }
+  .novablocks-conversations .comment-footer-highlights[class],
+  .novablocks-conversations .commenter-background-label {
+    --font-size: 13;
+    --current-font-weight: regular;
+    font-size: var(--final-font-size); }
+  .novablocks-conversations .comment-dropdown-toggle {
+    --font-size: 15;
+    --current-font-weight: regular;
+    font-size: var(--final-font-size); }
+  .novablocks-conversations .comment-footer-meta[class] {
+    --font-size: 16;
+    font-size: var(--final-font-size); }
+  .novablocks-conversations .comment-form label {
+    --font-size: 14; }
+    .novablocks-conversations .comment-form label + .field-description:not(:empty) {
+      margin-top: calc(-1 * var(--theme-input-vertical-spacing)); }
+  .novablocks-conversations .comment-form .field-description[class] {
+    --font-size: 15;
+    font-size: var(--final-font-size); }
+  .novablocks-conversations .comment-highlighted {
+    --component-accent-color: var(--theme-dark-primary);
+    --comment-author-color: var(--theme-dark-primary); }
+  .novablocks-conversations .comment-highlightedby-humans {
+    padding-right: 0; }
+  .novablocks-conversations .comment-form p:not(:last-child) {
+    margin-bottom: 0; }
+  .novablocks-conversations .comment-dropdown-menu[class] {
+    min-width: 220px; }
+  .novablocks-conversations .form-submit {
+    width: 100%; }
+  .novablocks-conversations [id="submit"] {
+    --current-font-weight: regular !important; }
+  .novablocks-conversations .comment-footer-highlights {
+    --current-font-weight: bold; }
+  .novablocks-conversations .comment .comment-highlighted,
+  .novablocks-conversations .comment .comment-highlighted .comment-dropdown-toggle {
+    color: var(--theme-dark-primary); }
+  @media not screen and (min-width: 1000px) {
+    .novablocks-conversations .comment {
+      margin-right: calc( -1 * var(--theme-wrapper-sides-spacing));
+      margin-left: calc( -1 * var(--theme-wrapper-sides-spacing)); }
+      .novablocks-conversations .comment > .comment-wrapper {
+        padding-right: var(--theme-wrapper-sides-spacing);
+        padding-left: var(--theme-wrapper-sides-spacing); }
+      .novablocks-conversations .comment.parent > .comment {
+        margin-right: 0;
+        margin-left: 0; }
+      .novablocks-conversations .comment.parent > .comment-wrapper {
+        color: var(--current-dark-primary); }
+      .novablocks-conversations .comment .comment-respond {
+        padding-right: var(--theme-wrapper-sides-spacing);
+        padding-left: var(--theme-wrapper-sides-spacing); } }
+  .novablocks-conversations .comment-author-name {
+    --font-size: 16;
+    font-size: var(--final-font-size); }
+  .novablocks-conversations .comment-dropdown-menu {
+    background-color: var(--current-light-primary);
+    color: var(--current-dark-primary); }
+    .novablocks-conversations .comment-dropdown-menu:after {
+      border-color: transparent transparent var(--current-light-primary); }
+    @media only screen and (min-width: 768px) {
+      .novablocks-conversations .comment-dropdown-menu {
+        top: calc(var(--current-line-height) * var(--final-font-size)); } }
+  .novablocks-conversations .commenter-background-label[class] {
+    position: relative;
+    background: none;
+    overflow: hidden;
+    z-index: 1;
+    color: var(--theme-light-primary); }
+    .novablocks-conversations .commenter-background-label[class]:before {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--label-bg-color);
+      z-index: -1;
+      opacity: .5; }
+  .novablocks-conversations .comment-highlighted .commenter-background-label:before,
+  .novablocks-conversations .bypostauthor .commenter-background-label:before {
+    opacity: 1; }
+  .novablocks-conversations .bypostauthor .commenter-background-label:before {
+    background-color: var(--theme-color-primary);
+    color: var(--theme-light-primary);
+    opacity: 1; }
+  .novablocks-conversations .comment-dropdown-toggle {
+    color: currentColor;
+    margin-top: 0;
+    margin-bottom: 0; }
+  .novablocks-conversations .comments-pagination .page-numbers > li {
+    margin-top: 0; }
+  .novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current) {
+    border-color: var(--current-dark-primary); }
+    .novablocks-conversations .comments-pagination .page-numbers .page-numbers:not(.current):hover {
+      border-color: var(--component-accent-color);
+      color: var(--theme-light-primary); }
+  .novablocks-conversations .fake-form-placeholder {
+    --novablocks-spacing: var(--theme-spacing-fluid-large); }
+  .novablocks-conversations .comment-form-comment .field-description {
+    margin-bottom: var(--theme-input-vertical-spacing); }
+  .novablocks-conversations .trix-hidden-input {
+    box-shadow: none; }
+  .novablocks-conversations .novablocks-conversations__notification-text span {
+    padding: .5em 1em;
+    border-radius: 999em; }
+  .novablocks-conversations .fake-input-button {
+    grid-row: 1/span 2; }
+  .novablocks-conversations #cancel-comment-reply-link {
+    opacity: 1;
+    color: var(--theme-button-background-color); }
+  @media not screen and (min-width: 480px) {
+    .novablocks-conversations .comment-form-cookies-consent[class] {
+      display: block; }
+      .novablocks-conversations .comment-form-cookies-consent[class] label {
+        margin-right: calc(var(--theme-checkbox-width) + 10px); }
+      .novablocks-conversations .comment-form-cookies-consent[class] input[type="checkbox"] {
+        margin-top: 5px; }
+    .novablocks-conversations input {
+      line-height: normal; }
+    .novablocks-conversations .commenter-background-label[class] {
+      padding-top: .2em; } }
+
+.novablocks-conversations__header {
+  display: flex;
+  align-items: baseline;
+  border-bottom: 4px solid;
+  padding-bottom: .3em; }
+
+.novablocks-conversations__title {
+  --current-font-weight: bold;
+  padding-left: .25em; }
+
+.novablocks-conversations__comments-count {
+  --font-size: 16;
+  color: var(--field-description-color);
+  font-size: var(--final-font-size);
+  opacity: .5; }
+
+.novablocks-conversations__notification-text[class] span {
+  background-color: var(--current-dark-primary);
+  color: var(--current-light-primary); }
+
+@media not screen and (min-width: 1000px) {
+  .novablocks-conversation__starter {
+    margin-right: calc(-1*var(--theme-wrapper-sides-spacing));
+    margin-left: calc(-1*var(--theme-wrapper-sides-spacing)); } }
+
+.novablocks-conversation__starter-subtitle {
+  --font-size: 19.5;
+  --component-accent-color: var(--theme-dark-primary);
+  font-size: var(--final-font-size); }
+
+.novablocks-conversation__starter-message[class] {
+  --font-size: 18;
+  color: var(--theme-dark-primary);
+  font-size: var(--final-font-size); }
+
+.comments-area .entry-content {
+  padding-right: 0;
+  padding-left: 0; }
+
+.fake-input-button {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  padding: var(--theme-input-padding);
+  color: var(--theme-input-color);
+  border-radius: var(--theme-input-border-radius);
+  background-color: var(--theme-input-background-color);
+  box-shadow: var(--theme-input-box-shadow);
+  border: 0;
+  transition: all .2s ease-in-out;
+  --font-size: var(--theme-input-font-size);
+  font-size: var(--final-font-size);
+  --current-font-family: var(--theme-input-font-family);
+  --current-font-weight: var(--theme-input-font-weight);
+  --current-font-style: var(--theme-input-font-style);
+  --current-line-height: var(--theme-input-line-height);
+  --current-letter-spacing: var(--theme-input-letter-spacing);
+  --current-text-transform: var(--theme-input-text-transform);
+  font-family: inherit;
+  -webkit-font-smoothing: initial;
+  -webkit-appearance: none; }
+  .fake-input-button:hover {
+    --theme-input-box-shadow: var(--theme-input-hover-box-shadow); }
+  .fake-input-button:focus, .fake-input-button:active {
+    --theme-input-border-color: var(--theme-input-focus-border-color);
+    --theme-input-box-shadow: var(--theme-input-focus-box-shadow);
+    outline: 0; }
+  .fake-input-button[disabled] {
+    border-color: var(--theme-input-disabled-border-color);
+    background-color: var(--theme-input-disabled-background-color); }
+  [class*="invalid"] .fake-input-button {
+    --theme-input-box-shadow: var(--theme-input-error-box-shadow);
+    --theme-input-color: var(--theme-input-error-color);
+    --theme-input-placeholder-color: var(--theme-input-error-color);
+    --theme-input-placeholder-opacity: 0; }
+    [class*="invalid"] .fake-input-button:hover {
+      --theme-input-box-shadow: var(--theme-input-error-box-shadow); }
+    [class*="invalid"] .fake-input-button:focus, [class*="invalid"] .fake-input-button:active {
+      --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow); }
+  .fake-input-button[class] {
+    color: rgba(0, 0, 0, 0.5); }
+  .is-dark .fake-input-button {
+    color: rgba(255, 255, 255, 0.5); }
+
+.trix-contained-input[class] {
+  --trix-input-bg-color: var(--theme-input-background-color);
+  --trix-toolbar-border-color: rgba(0, 0, 0, 0.3); }
+  .is-dark .trix-contained-input[class] {
+    --trix-toolbar-border-color: rgb(255, 255, 255); }
+
+trix-editor[id][id][id]:before {
+  color: var(--theme-input-placeholder-color);
+  opacity: var(--theme-input-placeholder-opacity);
+  --current-font-weight: regular; }
+
+trix-editor h1 {
+  --font-size: var(--theme-heading-4-font-size);
+  font-size: var(--final-font-size);
+  --current-font-family: var(--theme-heading-4-font-family);
+  --current-font-weight: var(--theme-heading-4-font-weight);
+  --current-font-style: var(--theme-heading-4-font-style);
+  --current-line-height: var(--theme-heading-4-line-height);
+  --current-letter-spacing: var(--theme-heading-4-letter-spacing);
+  --current-text-transform: var(--theme-heading-4-text-transform); }
+
+trix-editor,
+trix-toolbar {
+  width: 100%;
+  height: auto;
+  max-width: 100%;
+  padding: var(--theme-input-padding);
+  color: var(--theme-input-color);
+  border-radius: var(--theme-input-border-radius);
+  background-color: var(--theme-input-background-color);
+  box-shadow: var(--theme-input-box-shadow);
+  border: 0;
+  transition: all .2s ease-in-out;
+  --font-size: var(--theme-input-font-size);
+  font-size: var(--final-font-size);
+  --current-font-family: var(--theme-input-font-family);
+  --current-font-weight: var(--theme-input-font-weight);
+  --current-font-style: var(--theme-input-font-style);
+  --current-line-height: var(--theme-input-line-height);
+  --current-letter-spacing: var(--theme-input-letter-spacing);
+  --current-text-transform: var(--theme-input-text-transform);
+  font-family: inherit;
+  -webkit-font-smoothing: initial;
+  -webkit-appearance: none;
+  max-width: none; }
+  trix-editor:hover,
+  trix-toolbar:hover {
+    --theme-input-box-shadow: var(--theme-input-hover-box-shadow); }
+  trix-editor:focus, trix-editor:active,
+  trix-toolbar:focus,
+  trix-toolbar:active {
+    --theme-input-border-color: var(--theme-input-focus-border-color);
+    --theme-input-box-shadow: var(--theme-input-focus-box-shadow);
+    outline: 0; }
+  trix-editor[disabled],
+  trix-toolbar[disabled] {
+    border-color: var(--theme-input-disabled-border-color);
+    background-color: var(--theme-input-disabled-background-color); }
+  [class*="invalid"] trix-editor, [class*="invalid"]
+  trix-toolbar {
+    --theme-input-box-shadow: var(--theme-input-error-box-shadow);
+    --theme-input-color: var(--theme-input-error-color);
+    --theme-input-placeholder-color: var(--theme-input-error-color);
+    --theme-input-placeholder-opacity: 0; }
+    [class*="invalid"] trix-editor:hover, [class*="invalid"]
+    trix-toolbar:hover {
+      --theme-input-box-shadow: var(--theme-input-error-box-shadow); }
+    [class*="invalid"] trix-editor:focus, [class*="invalid"] trix-editor:active, [class*="invalid"]
+    trix-toolbar:focus, [class*="invalid"]
+    trix-toolbar:active {
+      --theme-input-box-shadow: var(--theme-input-focus-error-box-shadow); }
+  trix-editor[id],
+  trix-toolbar[id] {
+    border: 0; }
+
+trix-toolbar[id] {
+  padding: 0;
+  box-shadow: none;
+  border: 1px solid var(--trix-toolbar-border-color);
+  border-bottom: 0; }
+
+.is-dark .trix-button--icon:before {
+  filter: invert(1); }