[Summary view] [Print] [Text view]

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