[Summary view] [Print] [Text view]

   1  .wp-block-quote {
   2      border-left: none;
   3      font-family: var(--quote--font-family);
   4      font-size: var(--quote--font-size);
   5      font-style: var(--quote--font-style);
   6      font-weight: var(--quote--font-weight);
   7      line-height: var(--quote--line-height);
   8  
   9      p {
  10          font-family: inherit;
  11          font-size: inherit;
  12          font-style: inherit;
  13          font-weight: inherit;
  14          line-height: inherit;
  15          letter-spacing: inherit;
  16      }
  17  
  18      &:before {
  19          content: "\201C";
  20          left: 8px;
  21      }
  22  
  23      .wp-block-quote__citation,
  24      cite,
  25      footer {
  26          font-family: inherit;
  27          font-style: inherit;
  28          font-weight: inherit;
  29          line-height: inherit;
  30          letter-spacing: inherit;
  31  
  32          .has-background &,
  33          [class*="background-color"] &,
  34          [style*="background-color"] &,
  35          .wp-block-cover[style*="background-image"] & {
  36              color: currentColor;
  37          }
  38      }
  39  
  40      &:where(:not([style*="font-style"])) .wp-block-quote__citation,
  41      &:where(:not([style*="font-style"])) cite,
  42      &:where(:not([style*="font-style"])) footer {
  43          font-style: var(--quote--font-style-cite);
  44      }
  45  
  46      // The cite has a lighter font-weight than the rest of the quote.
  47      &:where(:not([style*="font-weight"])) .wp-block-quote__citation,
  48      &:where(:not([style*="font-weight"])) cite,
  49      &:where(:not([style*="font-weight"])) footer {
  50          font-weight: normal;
  51      }
  52  
  53      /**
  54       * Block Options
  55       */
  56      &.has-text-align-right {
  57          margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
  58          padding-right: 0;
  59          border-right: none;
  60  
  61          // Hide the left aligned quote.
  62          &:before {
  63              display: none;
  64          }
  65  
  66          // Align the quote left of the text.
  67          p:before {
  68              content: "\201D";
  69              margin-right: 5px;
  70          }
  71      }
  72  
  73      &.has-text-align-center {
  74          margin: var(--global--spacing-vertical) auto;
  75  
  76          &:before {
  77              display: none;
  78          }
  79      }
  80  
  81      // The large style was removed in WordPress 6.0, the CSS is kept for backwards compatibility.
  82      &.is-large,
  83      &.is-style-large {
  84          padding-left: 0;
  85          padding-right: 0;
  86  
  87          /* Resetting margins to match _block-container.scss */
  88          margin-top: var(--global--spacing-vertical);
  89          margin-bottom: var(--global--spacing-vertical);
  90  
  91          p {
  92              font-size: var(--quote--font-size-large);
  93              font-style: var(--quote--font-style-large);
  94              line-height: var(--quote--line-height-large);
  95          }
  96  
  97          &:before {
  98              font-size: var(--quote--font-size-large);
  99              line-height: var(--quote--line-height-large);
 100              left: calc(-1 * var(--global--spacing-horizontal));
 101          }
 102  
 103          &.has-text-align-right {
 104  
 105              // Hide the left aligned quote.
 106              &:before {
 107                  display: none;
 108              }
 109  
 110              // Align the quote left of the text.
 111              p:before {
 112                  content: "\201D";
 113                  font-size: var(--quote--font-size-large);
 114                  font-weight: normal;
 115                  line-height: var(--quote--line-height-large);
 116                  margin-right: 10px;
 117              }
 118          }
 119  
 120          .wp-block-quote__citation,
 121          cite,
 122          footer {
 123              color: var(--global--color-primary);
 124              font-size: var(--global--font-size-sm);
 125          }
 126  
 127          @include media(mobile-only) {
 128              padding-left: var(--global--spacing-horizontal);
 129  
 130              &:before {
 131                  left: 0;
 132              }
 133  
 134              &.has-text-align-right {
 135                  padding-left: 0;
 136                  padding-right: var(--global--spacing-horizontal);
 137  
 138                  &:before {
 139                      right: 0;
 140                  }
 141              }
 142  
 143              &.has-text-align-center {
 144                  padding-left: 0;
 145                  padding-right: 0;
 146              }
 147          }
 148      }
 149  
 150      @include media(mobile-only) {
 151  
 152          &.has-text-align-right {
 153              padding-left: 0;
 154              padding-right: calc(0.5 * var(--global--spacing-horizontal));
 155  
 156              &:before {
 157                  right: 0;
 158              }
 159          }
 160  
 161          &.has-text-align-center {
 162              padding-left: 0;
 163              padding-right: 0;
 164          }
 165      }
 166  }