[Summary view] [Print] [Text view]

   1  .wp-block-latest-posts {
   2      padding-left: 0;
   3  
   4      // Vertical margins logic
   5      &:not(.is-grid) > li {
   6          margin-top: calc(1.666 * var(--global--spacing-vertical));
   7          margin-bottom: calc(1.666 * var(--global--spacing-vertical));
   8  
   9          &:first-child {
  10              margin-top: 0;
  11          }
  12  
  13          &:last-child {
  14              margin-bottom: 0;
  15          }
  16      }
  17  
  18      .widget-area &:not(.is-grid) > li {
  19          margin-top: 0;
  20          margin-bottom: 0;
  21      }
  22  
  23      &.is-grid {
  24          word-wrap: break-word;
  25          word-break: break-word;
  26  
  27          > li {
  28              margin-bottom: var(--global--spacing-vertical);
  29  
  30              &:last-child {
  31                  margin-bottom: 0;
  32              }
  33          }
  34  
  35          // Remove bottom margins in grid columns
  36          &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
  37          &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
  38          &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
  39          &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
  40          &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
  41          &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
  42          &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
  43          &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
  44          &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
  45          &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
  46              margin-bottom: 0;
  47          }
  48      }
  49  
  50      > li > * {
  51          margin-top: calc(0.333 * var(--global--spacing-vertical));
  52          margin-bottom: calc(0.333 * var(--global--spacing-vertical));
  53  
  54          &:first-child {
  55              margin-top: 0;
  56          }
  57  
  58          &:last-child {
  59              margin-bottom: 0;
  60          }
  61      }
  62  
  63      // Post title
  64      > li > a {
  65          display: inline-block;
  66          font-family: var(--latest-posts--title-font-family);
  67          font-size: var(--latest-posts--title-font-size);
  68          font-weight: var(--heading--font-weight);
  69          line-height: var(--global--line-height-heading);
  70          margin-bottom: calc(0.333 * var(--global--spacing-vertical));
  71      }
  72  
  73      .widget-area & > li > a {
  74          font-size: var(--global--font-size-sm);
  75          margin-bottom: 0;
  76      }
  77  
  78      // Post author
  79      .wp-block-latest-posts__post-author {
  80          color: var(--global--color-primary);
  81          font-size: var(--global--font-size-md);
  82          line-height: var(--global--line-height-body);
  83      }
  84  
  85      // Post date
  86      .wp-block-latest-posts__post-date {
  87          color: var(--global--color-primary);
  88          font-size: var(--global--font-size-xs);
  89          line-height: var(--global--line-height-body);
  90  
  91          [class*="inner-container"] &,
  92          .has-background & {
  93              color: currentColor;
  94          }
  95      }
  96  
  97      // Post content
  98      .wp-block-latest-posts__post-excerpt,
  99      .wp-block-latest-posts__post-full-content {
 100          font-family: var(--latest-posts--description-font-family);
 101          font-size: var(--latest-posts--description-font-size);
 102          line-height: var(--global--line-height-body);
 103          margin-top: calc(0.666 * var(--global--spacing-vertical));
 104      }
 105  
 106      // Utility classes
 107      &.alignfull {
 108          padding-left: var(--global--spacing-unit);
 109          padding-right: var(--global--spacing-unit);
 110  
 111          .entry-content [class*="inner-container"] &,
 112          .entry-content .has-background & {
 113              padding-left: 0;
 114              padding-right: 0;
 115          }
 116      }
 117  
 118      // Block Styles
 119      &.is-style-twentytwentyone-latest-posts-dividers {
 120          border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
 121          border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
 122  
 123          &:not(.is-grid) > li,
 124          > li {
 125              padding-bottom: var(--global--spacing-vertical);
 126              border-bottom: var(--separator--height) solid var(--global--color-border);
 127              margin-top: var(--global--spacing-vertical);
 128              margin-bottom: var(--global--spacing-vertical);
 129  
 130              &:last-child {
 131                  padding-bottom: 0;
 132                  border-bottom: none;
 133              }
 134          }
 135  
 136          &.is-grid {
 137              // Border moves up 1px to overlap the li borders in the last row.
 138              box-shadow: inset 0 -1px 0 0 var(--global--color-border);
 139              border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
 140  
 141              li {
 142                  margin: 0;
 143                  padding-top: var(--global--spacing-vertical);
 144                  padding-right: var(--global--spacing-horizontal);
 145  
 146                  &:last-child {
 147                      padding-bottom: var(--global--spacing-vertical);
 148                  }
 149              }
 150  
 151              // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
 152              // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
 153              @media screen and (min-width: 600px) {
 154                  @for $i from 2 through 6 {
 155                      &.columns-#{ $i } li {
 156                          width: calc((100% / #{ $i }));
 157                      }
 158                  }
 159              }
 160          }
 161      }
 162  
 163      &.is-style-twentytwentyone-latest-posts-borders {
 164  
 165          li {
 166              border: calc(3 * var(--separator--height)) solid var(--global--color-border);
 167              padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 168  
 169              &:last-child {
 170                  padding-bottom: var(--global--spacing-vertical);
 171              }
 172          }
 173  
 174          &:not(.is-grid) li {
 175              margin-top: var(--global--spacing-horizontal);
 176              margin-bottom: var(--global--spacing-horizontal);
 177          }
 178      }
 179  }