[Summary view] [Print] [Text view]

   1  /*!
   2  Twenty Nineteen Editor Styles
   3  */
   4  
   5  /** === Includes === */
   6  
   7  @import "sass/variables-site/variables-site";
   8  @import "sass/mixins/mixins-master";
   9  
  10  /** === Editor Frame === */
  11  
  12  body {
  13  
  14      .wp-block[data-align="full"],
  15      .wp-block.alignfull {
  16          max-width: calc(100% + 16px);
  17          width: calc(100% + 16px);
  18      }
  19  
  20      .wp-block[data-align="left"],
  21      .wp-block.alignleft {
  22          margin-right: $size__spacing-unit;
  23          width: inherit;
  24      }
  25  
  26      .wp-block[data-align="right"],
  27      .wp-block.alignright {
  28          margin-left: $size__spacing-unit;
  29          width: inherit;
  30      }
  31  
  32      .wp-block[data-align="center"],
  33      .wp-block.aligncenter {
  34          margin-left: 0;
  35      }
  36  
  37      @include media(tablet) {
  38  
  39          &.block-editor-iframe__body,
  40          &.block-editor-writing-flow,
  41          .block-editor-writing-flow {
  42              max-width: 80%;
  43              margin: 0 10%;
  44          }
  45  
  46          .block-editor-default-block-appender,
  47          .block-editor-block-list__block {
  48              margin-left: 0;
  49              margin-right: 0;
  50          }
  51  
  52          .wp-block[data-align="wide"],
  53          .wp-block.alignwide {
  54              width: 100%;
  55          }
  56  
  57          .wp-block[data-align="full"],
  58          .wp-block.alignfull {
  59              width: calc(125% + 16px);
  60              max-width: calc(125% + 16px);
  61              position: relative;
  62              left: -12.5%;
  63          }
  64  
  65          .wp-block[data-align="wide"] .wp-block[data-align="full"],
  66          .wp-block[data-align="full"] .wp-block[data-align="full"],
  67          .wp-block.alignwide .wp-block.alignfull,
  68          .wp-block.alignfull .wp-block.alignfull {
  69              left: 0;
  70              margin-left: 0;
  71              margin-right: 0;
  72          }
  73      }
  74  }
  75  
  76  /** === Content Width === */
  77  
  78  .wp-block {
  79      max-width: 100%;
  80  
  81      @include media(tablet) {
  82          width: calc(8 * (100vw / 12));
  83      }
  84  
  85      @include media(desktop) {
  86          width: calc(6 * (100vw / 12 ));
  87      }
  88  
  89      // Only the top level blocks need specific widths, therefore override for every nested block.
  90      .wp-block {
  91          width: initial;
  92      }
  93  }
  94  
  95  /** === Base Typography === */
  96  
  97  body {
  98      -webkit-font-smoothing: antialiased;
  99      -moz-osx-font-smoothing: grayscale;
 100      font-size: $font__size_base;
 101      @include font-family( $font__body );
 102      line-height: $font__line-height-body;
 103      color: $color__text-main;
 104  }
 105  
 106  p {
 107      font-size: $font__size_base;
 108  }
 109  
 110  h1,
 111  h2,
 112  h3,
 113  h4,
 114  h5,
 115  h6 {
 116      @include font-family( $font__heading );
 117      font-weight: 700;
 118  }
 119  
 120  h1 {
 121      font-size: $font__size-xl;
 122  
 123      @include media(tablet) {
 124          font-size: $font__size-xxl;
 125      }
 126  }
 127  
 128  .wp-block-post-title,
 129  h2 {
 130      font-size: $font__size-lg;
 131  
 132      @include media(tablet) {
 133          font-size: $font__size-xl;
 134      }
 135  }
 136  
 137  h1,
 138  h2 {
 139      @include post-section-dash;
 140  }
 141  
 142  h3 {
 143      font-size: $font__size-lg;
 144  }
 145  
 146  h4 {
 147      font-size: $font__size-md;
 148  }
 149  
 150  h5 {
 151      font-size: $font__size-sm;
 152  }
 153  
 154  h6 {
 155      font-size: $font__size-xs;
 156  }
 157  
 158  a {
 159      @include link-transition;
 160      color: $color__link;
 161  
 162      &:hover,
 163      &:active {
 164          color: $color__link-hover;
 165          outline: 0;
 166          text-decoration: none;
 167      }
 168  
 169      &:focus {
 170          outline: 0;
 171          text-decoration: underline;
 172      }
 173  }
 174  
 175  // Use white text against these backgrounds by default.
 176  .has-primary-background-color,
 177  .has-secondary-background-color,
 178  .has-dark-gray-background-color,
 179  .has-light-gray-background-color {
 180      color: $color__background-body;
 181  
 182      p,
 183      h1,
 184      h2,
 185      h3,
 186      h4,
 187      h5,
 188      h6,
 189      a {
 190          color: $color__background-body;
 191      }
 192  }
 193  
 194  // Use dark gray text against this background by default.
 195  .has-white-background-color {
 196      color: $color__text-main;
 197  
 198      p,
 199      h1,
 200      h2,
 201      h3,
 202      h4,
 203      h5,
 204      h6,
 205      a {
 206          color: $color__text-main;
 207      }
 208  }
 209  
 210  figcaption,
 211  .gallery-caption {
 212      @include font-family( $font__heading );
 213      font-size: $font__size-xs;
 214      line-height: 1.6;
 215      color: $color__text-light;
 216  }
 217  
 218  /** === Post Title === */
 219  
 220  .editor-post-title__block {
 221      width: 100%;
 222      @include post-section-dash;
 223  
 224      &:before {
 225          width: $font__size-xxl;
 226          margin-top: 0;
 227          margin-bottom: 0;
 228          margin-left: 1rem;
 229          position: relative;
 230          top: 0.5em;
 231  
 232          @include media(mobile) {
 233              margin-left: 0;
 234          }
 235      }
 236  
 237      .editor-post-title__input {
 238          @include font-family( $font__heading );
 239          font-size: $font__size-xxl;
 240          font-weight: 700;
 241      }
 242  }
 243  
 244  /** === Default Appender === */
 245  
 246  .block-editor-default-block-appender textarea.block-editor-default-block-appender__content {
 247      @include font-family( $font__body );
 248      font-size: $font__size_base;
 249  }
 250  
 251  /** === Heading === */
 252  
 253  .wp-block-heading {
 254      strong {
 255          font-weight: bolder;
 256      }
 257  }
 258  /** === Paragraph === */
 259  
 260  .wp-block-paragraph {
 261  
 262      &.has-drop-cap:not(:focus)::first-letter {
 263          @include font-family( $font__heading );
 264          font-size: $font__size-xxxl;
 265          line-height: 1;
 266          font-weight: bold;
 267          margin: 0 0.25em 0 0;
 268  
 269          @-moz-document url-prefix()  {
 270              & {
 271                  margin-top: 0.2em;
 272              }
 273          }
 274      }
 275  }
 276  
 277  /** === Table === */
 278  
 279  .wp-block-table {
 280      @include font-family( $font__heading );
 281  }
 282  
 283  /** === Cover === */
 284  
 285  .wp-block-cover {
 286  
 287      h2,
 288      .wp-block-cover-text {
 289          @include font-family( $font__heading );
 290          font-size: $font__size-lg;
 291          font-weight: bold;
 292          line-height: 1.4;
 293          padding-left: $size__spacing-unit;
 294          padding-right: $size__spacing-unit;
 295  
 296          strong {
 297              font-weight: bolder;
 298          }
 299  
 300          @include media(tablet) {
 301              margin-left: auto;
 302              margin-right: auto;
 303              padding: 0;
 304          }
 305      }
 306  
 307      @include media(tablet) {
 308          padding-left: 10%;
 309          padding-right: 10%;
 310  
 311          h2,
 312          .wp-block-cover-text {
 313              font-size: $font__size-xl;
 314          }
 315      }
 316  }
 317  
 318  .wp-block[data-type="core/cover"][data-align="left"],
 319  .wp-block[data-type="core/cover"][data-align="right"] {
 320  
 321      .editor-block-list__block-edit {
 322          width: calc(4 * (100vw / 12));
 323      }
 324  
 325      .wp-block-cover {
 326          width: 100%;
 327          max-width: 100%;
 328          padding: calc(1.375 * #{$size__spacing-unit});
 329  
 330          p {
 331              padding-left: 0;
 332              padding-right: 0;
 333          }
 334  
 335          @include media(tablet) {
 336              padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit});
 337          }
 338      }
 339  }
 340  
 341  .wp-block[data-type="core/cover"][data-align="wide"],
 342  .wp-block[data-type="core/cover"][data-align="full"] {
 343  
 344      @include media(tablet) {
 345  
 346          h2,
 347          .wp-block-cover-text {
 348              max-width: calc(8 * (100vw / 12));
 349          }
 350      }
 351  
 352      @include media(desktop) {
 353  
 354          h2,
 355          .wp-block-cover-text {
 356              max-width: calc(6 * (100vw / 12));
 357          }
 358      }
 359  }
 360  
 361  .wp-block[data-type="core/cover"][data-align="full"] {
 362  
 363      @include media(tablet) {
 364  
 365          .wp-block-cover {
 366              padding-left: calc(10% + 64px);
 367              padding-right: calc(10% + 64px);
 368          }
 369      }
 370  }
 371  
 372  /** === Gallery === */
 373  
 374  .wp-block-gallery {
 375  
 376      .blocks-gallery-image figcaption,
 377      .blocks-gallery-item figcaption,
 378      .gallery-item .gallery-caption {
 379          font-size: $font__size-xs;
 380          line-height: 1.6;
 381      }
 382  }
 383  
 384  /** === Audio === */
 385  
 386  .wp-block-audio {
 387  
 388      audio {
 389          display: block;
 390      }
 391  }
 392  
 393  /** === Button === */
 394  
 395  .wp-block-buttons {
 396      line-height: $font__line-height-heading;
 397  }
 398  
 399  .wp-block-button {
 400  
 401      .wp-block-button__link {
 402          @include font-family( $font__heading );
 403          font-size: $font__size-sm;
 404          font-weight: bold;
 405          padding: ($font__size_base * .76) $font__size_base;
 406  
 407          &:not(.has-text-color) {
 408              color: #fff;
 409          }
 410      }
 411  
 412      &:not(.is-style-outline) .wp-block-button__link {
 413          background: $color__background-button;
 414      }
 415  
 416      &:not(.is-style-squared) .wp-block-button__link {
 417          border-radius: 5px;
 418      }
 419  
 420      &.is-style-outline,
 421      &.is-style-outline:hover,
 422      &.is-style-outline:focus,
 423      &.is-style-outline:active {
 424          background: transparent;
 425          color: $color__background-button;
 426  
 427          .wp-block-button__link {
 428              background: transparent;
 429  
 430              &:not(.has-text-color) {
 431                  color: $color__background-button;
 432              }
 433          }
 434      }
 435  }
 436  
 437  .wp-block-buttons,
 438  .wp-block-button {
 439  
 440      &[style*="font-weight"] .wp-block-button__link {
 441          font-weight: inherit;
 442      }
 443  
 444      &[style*="text-decoration"] .wp-block-button__link {
 445          text-decoration: inherit;
 446      }
 447  }
 448  
 449  .wp-block-search {
 450      .wp-block-search__button {
 451          @include font-family( $font__heading );
 452          font-size: $font__size-sm;
 453          font-weight: bold;
 454          border-radius: 5px;
 455  
 456          &:not(.has-text-color) {
 457              color: #fff;
 458          }
 459  
 460          &:not(.has-background-color) {
 461              background: $color__background-button;
 462          }
 463      }
 464  }
 465  
 466  
 467  /** === Blockquote === */
 468  
 469  .wp-block-quote {
 470  
 471      &:not(.is-large):not(.is-style-large) {
 472          border-width: 2px;
 473          border-color: $color__link;
 474      }
 475  
 476      &.is-large,
 477      &.is-style-large {
 478          margin-top: $font__size-xxl;
 479          margin-bottom: $font__size-xxl;
 480      }
 481  
 482      &.is-large p,
 483      &.is-style-large p {
 484          font-size: $font__size-lg;
 485          line-height: 1.3;
 486          margin-bottom: 0.5em;
 487          margin-top: 0.5em;
 488      }
 489  
 490      cite,
 491      footer,
 492      .wp-block-quote__citation {
 493          @include font-family( $font__heading );
 494          font-size: $font__size-xs;
 495          line-height: 1.6;
 496          color: inherit;
 497      }
 498  }
 499  
 500  /** === Pullquote === */
 501  
 502  .wp-block-pullquote {
 503      border-color: transparent;
 504      border-width: 2px;
 505      color: #000;
 506  
 507      blockquote {
 508          margin-top: calc(3 * #{ $size__spacing-unit});
 509          margin-bottom: calc(3.33 * #{ $size__spacing-unit});
 510          hyphens: auto;
 511          word-break: break-word;
 512      }
 513  
 514      &:not(.is-style-solid-color) .wp-block-pullquote__citation {
 515          color: $color__text-light;
 516      }
 517  
 518      &.is-style-solid-color {
 519  
 520          blockquote {
 521              width: calc(100% - (2 * #{ $size__spacing-unit}));
 522              max-width: calc( 100% - (2 * #{ $size__spacing-unit}));
 523  
 524              a,
 525              &.has-text-color p,
 526              &.has-text-color a {
 527                  color: inherit;
 528              }
 529  
 530              &:not(.has-text-color) {
 531                  color: $color__background-body;
 532              }
 533  
 534              @include media(tablet) {
 535                  max-width: 80%;
 536              }
 537          }
 538  
 539          &:not(.has-background-color) {
 540              background-color: $color__link;
 541          }
 542      }
 543  }
 544  
 545  .wp-block-pullquote[data-type="core/pullquote"],
 546  .wp-block[data-type="core/pullquote"],
 547  .wp-block[data-type="core/pullquote"][data-align="left"],
 548  .wp-block[data-type="core/pullquote"][data-align="right"] {
 549  
 550      blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 551      blockquote > .editor-rich-text p,
 552      p {
 553          font-size: $font__size-lg;
 554          font-style: italic;
 555          line-height: 1.3;
 556          margin-bottom: 0.5em;
 557          margin-top: 0.5em;
 558  
 559          @include media(tablet) {
 560              font-size: $font__size-xl;
 561          }
 562      }
 563  
 564      .wp-block-pullquote__citation {
 565          @include font-family( $font__heading );
 566          font-size: $font__size-xs;
 567          line-height: 1.6;
 568          text-transform: none;
 569      }
 570  
 571      em {
 572          font-style: normal;
 573      }
 574  }
 575  
 576  .wp-block[data-align="left"] > .wp-block-pullquote,
 577  .wp-block[data-align="right"] > .wp-block-pullquote {
 578      max-width: 50%;
 579      text-align: inherit;
 580  
 581      &:not(.is-style-solid-color) {
 582          padding: 0;
 583      }
 584  
 585      &.is-style-solid-color {
 586          padding: 1em;
 587      }
 588  }
 589  
 590  .wp-block[data-type="core/pullquote"][data-align="left"],
 591  .wp-block[data-type="core/pullquote"][data-align="right"] {
 592  
 593      .editor-block-list__block-edit {
 594          width: calc(4 * (100vw / 12));
 595          max-width: 50%;
 596  
 597          .wp-block-pullquote:not(.is-style-solid-color) {
 598              padding: 0;
 599          }
 600  
 601          .wp-block-pullquote.is-style-solid-color {
 602              padding: 1em;
 603          }
 604      }
 605  
 606      blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before,
 607      blockquote > .editor-rich-text p,
 608      p,
 609      .wp-block-pullquote__citation {
 610          text-align: left;
 611      }
 612  }
 613  
 614  .wp-block[data-type="core/pullquote"][data-align="full"] {
 615  
 616      @include media(tablet) {
 617  
 618          .wp-block-pullquote blockquote {
 619              max-width: calc(80% - 128px);
 620          }
 621      }
 622  }
 623  
 624  
 625  /** === File === */
 626  
 627  .wp-block-file {
 628      @include font-family( $font__heading );
 629  
 630      .wp-block-file__textlink {
 631          text-decoration: underline;
 632          color: $color__link;
 633  
 634          &:hover {
 635              color: $color__link-hover;
 636              text-decoration: none;
 637          }
 638      }
 639  
 640      .wp-block-file__button {
 641          display: table;
 642          line-height: 1.8;
 643          font-size: $font__size-sm;
 644          font-weight: bold;
 645          background-color: $color__link;
 646          border-radius: 5px;
 647      }
 648  
 649      .wp-block-file__button-richtext-wrapper {
 650          display: block;
 651          margin-top: calc(0.75 * #{$size__spacing-unit});
 652          margin-left: 0;
 653      }
 654  
 655  }
 656  
 657  /** === Verse === */
 658  
 659  .wp-block-verse,
 660  .wp-block-verse pre {
 661      padding: 0;
 662  }
 663  
 664  /** === Code === */
 665  
 666  .wp-block-code {
 667      border-radius: 0;
 668  }
 669  
 670  /** === Table === */
 671  
 672  .wp-block-table {
 673  
 674      td, th {
 675          border-color: $color__text-light;
 676      }
 677  }
 678  
 679  /** === Separator === */
 680  
 681  .wp-block-separator {
 682  
 683      &:not(.is-style-dots) {
 684          background-color: $color__text-light;
 685          height: 2px;
 686      }
 687  
 688      &:not(.is-style-wide):not(.is-style-dots) {
 689          width: $font__size-xl;
 690          margin-left: 0;
 691      }
 692  
 693      &.is-style-dots {
 694          color: $color__text-light;
 695      }
 696  
 697      &.is-style-dots:before {
 698          font-size: $font__size-lg;
 699          letter-spacing: calc(2 * #{$size__spacing-unit});
 700          padding-left: calc(2 * #{$size__spacing-unit});
 701      }
 702  
 703      &.has-primary-background-color {
 704          color: $color__link;
 705          background-color: $color__link;
 706      }
 707  
 708      &.has-secondary-background-color {
 709          color: $color__border-link-hover;
 710          background-color: $color__border-link-hover;
 711      }
 712  
 713      &.has-dark-gray-background-color {
 714          color: $color__text-main;
 715          background-color: $color__text-main;
 716      }
 717  
 718      &.has-light-gray-background-color {
 719          color: $color__text-light;
 720          background-color: $color__text-light;
 721      }
 722  
 723      &.has-white-background-color {
 724          color: #fff;
 725          background-color: #fff;
 726      }
 727  }
 728  
 729  /* Remove duplicate rule-line when a separator
 730   * is followed by an H1, or H2 */
 731  .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h1:before,
 732  .wp-block[data-type="core/separator"] + .wp-block[data-type="core/heading"] h2:before {
 733      display: none;
 734  }
 735  
 736  /** === Latest Posts, Archives, Categories === */
 737  
 738  ul.wp-block-archives,
 739  .wp-block-categories,
 740  .wp-block-latest-posts {
 741      padding: 0;
 742      list-style-type: none;
 743  
 744      ul {
 745          padding: 0;
 746          list-style-type: none;
 747      }
 748  
 749      li {
 750  
 751          > a {
 752              @include font-family( $font__heading );
 753              font-size: calc(#{$font__size_base} * #{$font__size-ratio});
 754              font-weight: bold;
 755              line-height: $font__line-height-heading;
 756              text-decoration: none;
 757          }
 758  
 759          ul {
 760              padding-left: $size__spacing-unit;
 761          }
 762      }
 763  }
 764  
 765  .wp-block-categories {
 766  
 767      ul {
 768          padding-top: ( .75 * $size__spacing-unit );
 769          @include nestedSubMenuPadding();
 770      }
 771  
 772      li ul {
 773          list-style: none;
 774          padding-left: 0;
 775          margin-bottom: ( -.75 * $size__spacing-unit );
 776      }
 777  
 778  }
 779  
 780  .wp-block[data-align="center"] > .wp-block-archives,
 781  .wp-block[data-align="center"] > .wp-block-categories {
 782      text-align: center;
 783  }
 784  
 785  /** === Latest Posts === */
 786  .wp-block-latest-posts {
 787  
 788      .wp-block-latest-posts__post-date {
 789          @include font-family( $font__heading );
 790          font-size: $font__size-xs;
 791          color: $color__text-light;
 792          line-height: 1.2;
 793      }
 794  
 795      .wp-block-latest-posts__post-full-content,
 796      .wp-block-latest-posts__post-excerpt {
 797          margin-top: $font__size_base;
 798          margin-bottom: $font__size_base;
 799  
 800          > div > p:first-child {
 801              margin-top: $font__size_base;
 802          }
 803      }
 804  
 805      li {
 806          padding-bottom: ( .5 * $size__spacing-unit );
 807  
 808          &.menu-item-has-children,
 809          &:last-child {
 810              padding-bottom: 0;
 811          }
 812  
 813          :not(:last-child) .wp-block-latest-posts__post-excerpt {
 814              padding-bottom: ( .5 * $size__spacing-unit );
 815          }
 816      }
 817  
 818      &.is-grid {
 819          li {
 820              border-top: 2px solid $color__border;
 821              padding-top: (1 * $size__spacing-unit);
 822              margin-bottom: (2 * $size__spacing-unit);
 823              a {
 824                  &:after {
 825                      content: '';
 826                  }
 827              }
 828              &:last-child {
 829                  margin-bottom: auto;
 830                  a:after {
 831                      content: '';
 832                  }
 833              }
 834          }
 835      }
 836  }
 837  
 838  /** === Latest Comments === */
 839  
 840  .wp-block-latest-comments {
 841  
 842      .wp-block-latest-comments__comment-meta {
 843          @include font-family( $font__heading );
 844          font-weight: bold;
 845  
 846          .wp-block-latest-comments__comment-date {
 847              font-weight: normal;
 848          }
 849      }
 850  
 851      .wp-block-latest-comments__comment,
 852      .wp-block-latest-comments__comment-date,
 853      .wp-block-latest-comments__comment-excerpt p {
 854          font-size: inherit;
 855      }
 856  
 857      .wp-block-latest-comments__comment-date {
 858          font-size: $font__size-xs;
 859      }
 860  }
 861  
 862  /** === Classic Editor === */
 863  
 864  /* Properly center-align captions in the classic-editor block */
 865  .wp-caption {
 866      dd {
 867          color: $color__text-light;
 868           font-size: $font__size-xs;
 869           @include font-family( $font__heading );
 870           line-height: $font__line-height-pre;
 871           margin: 0;
 872           padding: ( $size__spacing-unit * .5 );
 873           text-align: left;
 874          text-align: center;
 875          -webkit-margin-start: 0;
 876          margin-inline-start: 0;
 877      }
 878  }
 879  
 880  .wp-block-freeform {
 881  
 882      blockquote {
 883          border-left: 2px solid $color__link;
 884  
 885          cite {
 886              @include font-family( $font__heading );
 887              font-size: $font__size-xs;
 888              font-style: normal;
 889              line-height: 1.6;
 890              color: $color__text-light;
 891          }
 892      }
 893  }
 894  
 895  /** === Group Block === */
 896  
 897  // This matches the 22px value for 1rem that used on the front end.
 898  // It must be specified in pixels for the editor, since the root font
 899  // size is different here.
 900  $group-block-background__padding: $font__size_base;
 901  
 902  .wp-block-group {
 903  
 904      // Child: Full alignment
 905      > .wp-block-group__inner-container > .wp-block[data-align="full"],
 906      > .wp-block-group__inner-container > .wp-block.alignfull {
 907          margin-left: 0;
 908          margin-right: 0;
 909          left: 0;
 910      }
 911  
 912      // Group block with background color
 913      &.has-background {
 914          padding: $group-block-background__padding;
 915  
 916          // Child: Full alignment
 917          > .wp-block-group__inner-container > .wp-block[data-align="full"],
 918          > .wp-block-group__inner-container > .wp-block.alignfull {
 919              margin-left: -$group-block-background__padding;
 920              width: calc(100% + #{$group-block-background__padding * 2});
 921              max-width: calc(100% + #{$group-block-background__padding * 2});
 922          }
 923      }
 924  }
 925  
 926  // Wide and full alignments
 927  .wp-block[data-align="wide"] > .wp-block-group {
 928  
 929      > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
 930          @include media(tablet) {
 931              width: calc(8 * (100vw / 12));
 932          }
 933  
 934          @include media(desktop) {
 935              width: calc(6 * (100vw / 12 ));
 936          }
 937      }
 938  
 939      // Child blocks: Full alignment
 940      > .wp-block-group__inner-container > .wp-block[data-align="full"],
 941      > .wp-block-group__inner-container > .wp-block.alignfull {
 942          padding-left: 0;
 943          padding-right: 0;
 944      }
 945  
 946  
 947      // Group block with background color
 948      &.has-background {
 949  
 950          // Child blocks: Default alignments
 951          > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
 952              @include media(tablet) {
 953                  width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
 954              }
 955  
 956              @include media(desktop) {
 957                  width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
 958              }
 959          }
 960      }
 961  }
 962  
 963  // Full alignment
 964  .wp-block[data-align="full"] > .wp-block-group {
 965  
 966          // Margins & padding are added to this container to mimic
 967          // the style + spacing of the .editor-writing-flow global
 968          // container. This way, child items sync up with the placement
 969          // and size of other top-level blocks.
 970          > .wp-block-group__inner-container {
 971  
 972              // 2px of extra padding are added to each side here
 973              // To better match up with the spacing of the whole
 974              // document.
 975              @include media(tablet) {
 976                  width: 80%;
 977                  margin-left: 10%;
 978                  margin-right: 10%;
 979                  padding-left: 10px;
 980                  padding-right: 10px;
 981              }
 982  
 983              // Child blocks: Normal Alignments
 984              > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
 985  
 986                  @include media(tablet) {
 987                      max-width: calc(8 * (100vw / 12));
 988                  }
 989  
 990                  @include media(desktop) {
 991                      max-width: calc(6 * (100vw / 12));
 992                  }
 993              }
 994  
 995              // Child blocks: Not Full Alignments
 996              > .wp-block:not([data-align="full"]):not(.alignfull) {
 997                  padding-left: 10px;
 998                  padding-right: 10px;
 999  
1000                  @include media(tablet) {
1001                      padding-left: 0;
1002                      padding-right: 0;
1003                  }
1004              }
1005  
1006              // Child blocks: Right alignments
1007              > .wp-block[data-align="right"] {
1008  
1009                  @include media(tablet) {
1010                      max-width: 125%;
1011                  }
1012              }
1013  
1014              // Child blocks: Wide alignments
1015              > .wp-block[data-align="wide"],
1016              > .wp-block.alignwide {
1017  
1018                  @include media(tablet) {
1019                      width: 100%;
1020                      max-width: 100%;
1021                  }
1022              }
1023  
1024              // Child blocks: Full alignments
1025              > .wp-block[data-align=full],
1026              > .wp-block.alignfull {
1027  
1028                  @include media(tablet) {
1029                      left: calc( -12.5% - 13px );
1030                      width: calc( 125% + 26px );
1031                      max-width: calc( 125% + 25px );
1032                  }
1033              }
1034          }
1035  
1036          // Group block with background color
1037          &.has-background {
1038  
1039              // When the Group block is full width, we can remove the left/right padding.
1040              padding: $group-block-background__padding 0;
1041  
1042              @include media(mobile) {
1043                  padding-left: 0;
1044                  padding-right: 0;
1045              }
1046  
1047              // Child blocks: Full alignment
1048              > .wp-block-group__inner-container > .wp-block[data-align="full"],
1049              > .wp-block-group__inner-container > .wp-block.alignfull {
1050                  margin-left: 0;
1051                  width: 100%;
1052  
1053                  @include media(mobile) {
1054                      width: calc(100% + 92px);
1055                  }
1056  
1057                  @include media(tablet) {
1058                      width: calc(125% + 120px);
1059                  }
1060              }
1061          }
1062      }
1063  
1064  .wp-block-post-template {
1065  
1066      .wp-block[data-align="full"],
1067      .wp-block.alignfull {
1068          left: 0;
1069          max-width: 100%;
1070          padding-left: 0;
1071          padding-right: 0;
1072          width: 100%;
1073      }
1074  }
1075  
1076  /** === Post Author Block === */
1077  
1078  .avatar,
1079  .wp-block-post-author__avatar img {
1080      border-radius: 100%;
1081  }