[Summary view] [Print] [Text view]

   1  .wp-block-cover,
   2  .wp-block-cover-image {
   3  
   4      &:not(.alignwide):not(.alignfull) {
   5          clear: both;
   6      }
   7  
   8      background-color: var(--cover--color-background);
   9      min-height: var(--cover--height);
  10      margin-top: inherit;
  11      margin-bottom: inherit;
  12  
  13      [data-align="full"] & {
  14          margin-top: 0;
  15          margin-bottom: 0;
  16      }
  17  
  18      @include innerblock-margin-clear(".wp-block-cover__inner-container");
  19  
  20      .wp-block-cover__inner-container,
  21      .wp-block-cover-image-text,
  22      .wp-block-cover-text,
  23      .block-editor-block-list__block {
  24          color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
  25  
  26          a {
  27              color: currentColor;
  28          }
  29  
  30          .has-link-color a {
  31              color: var(--wp--style--color--link, var(--global--color-primary));
  32          }
  33      }
  34  
  35      // Default & custom background-color
  36      &:not([class*="background-color"]) {
  37  
  38          .wp-block-cover__inner-container,
  39          .wp-block-cover-image-text,
  40          .wp-block-cover-text,
  41          .block-editor-block-list__block {
  42              color: var(--cover--color-foreground);
  43          }
  44      }
  45  
  46      // Treating H2 separately to account for legacy /core styles
  47      h2 {
  48          font-size: var(--heading--font-size-h2);
  49          letter-spacing: var(--heading--letter-spacing-h2);
  50          line-height: var(--heading--line-height-h2);
  51          padding: 0;
  52          text-align: inherit;
  53  
  54          &.has-text-align-left {
  55              text-align: left;
  56          }
  57  
  58          &.has-text-align-center {
  59              text-align: center;
  60          }
  61  
  62          &.has-text-align-right {
  63              text-align: right;
  64          }
  65      }
  66  
  67      // Block Styles
  68      &.is-style-twentytwentyone-border {
  69          border: calc(3 * var(--separator--height)) solid var(--global--color-border);
  70      }
  71  
  72      // The background color class is used just for the overlay, and does not need to be applied to the inner container.
  73      &[class*="-background-color"][class] .wp-block-cover__inner-container {
  74          background-color: unset;
  75      }
  76  }