[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      &.is-grid {
  19          word-wrap: break-word;
  20          word-break: break-word;
  21  
  22          > li {
  23              margin-bottom: var(--global--spacing-vertical);
  24  
  25              &:last-child {
  26                  margin-bottom: 0;
  27              }
  28          }
  29      }
  30  
  31      > li > * {
  32          margin-top: calc(0.333 * var(--global--spacing-vertical));
  33          margin-bottom: calc(0.333 * var(--global--spacing-vertical));
  34  
  35          &:first-child {
  36              margin-top: 0;
  37          }
  38  
  39          &:last-child {
  40              margin-bottom: 0;
  41          }
  42      }
  43  
  44      // Post title
  45      > li > a {
  46          display: inline-block;
  47          font-family: var(--latest-posts--title-font-family);
  48          font-size: var(--latest-posts--title-font-size);
  49          font-weight: var(--heading--font-weight);
  50          line-height: var(--global--line-height-heading);
  51          margin-bottom: calc(0.333 * var(--global--spacing-vertical));
  52      }
  53  
  54      // Post author
  55      .wp-block-latest-posts__post-author {
  56          color: var(--global--color-primary);
  57          font-size: var(--global--font-size-md);
  58          line-height: var(--global--line-height-body);
  59      }
  60  
  61      // Post date
  62      .wp-block-latest-posts__post-date {
  63          color: var(--global--color-primary);
  64          font-size: var(--global--font-size-xs);
  65          line-height: var(--global--line-height-body);
  66  
  67          [class*="inner-container"] &,
  68          .has-background & {
  69              color: currentColor;
  70          }
  71      }
  72  
  73      // Post content
  74      .wp-block-latest-posts__post-excerpt,
  75      .wp-block-latest-posts__post-full-content {
  76          font-family: var(--latest-posts--description-font-family);
  77          font-size: var(--latest-posts--description-font-size);
  78          line-height: var(--global--line-height-body);
  79          margin-top: calc(0.666 * var(--global--spacing-vertical));
  80      }
  81  
  82      // Block Styles
  83      &.is-style-twentytwentyone-latest-posts-dividers {
  84          border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
  85          border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
  86  
  87          &:not(.is-grid) > li,
  88          > li {
  89              padding-bottom: var(--global--spacing-vertical);
  90              border-bottom: var(--separator--height) solid var(--global--color-border);
  91              margin-top: var(--global--spacing-vertical);
  92              margin-bottom: var(--global--spacing-vertical);
  93  
  94              &:last-child {
  95                  padding-bottom: 0;
  96                  border-bottom: none;
  97              }
  98          }
  99  
 100          &.is-grid {
 101              // Border moves up 1px to overlap the li borders in the last row.
 102              box-shadow: inset 0 -1px 0 0 var(--global--color-border);
 103              border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
 104  
 105              li {
 106                  margin: 0;
 107                  padding-top: var(--global--spacing-vertical);
 108                  padding-right: var(--global--spacing-horizontal);
 109  
 110                  &:last-child {
 111                      padding-bottom: var(--global--spacing-vertical);
 112                  }
 113              }
 114  
 115              // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
 116              // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
 117              @media screen and (min-width: 600px) {
 118                  @for $i from 2 through 6 {
 119                      &.columns-#{ $i } li {
 120                          width: calc((100% / #{ $i }));
 121                      }
 122                  }
 123              }
 124          }
 125      }
 126  
 127      &.is-style-twentytwentyone-latest-posts-borders {
 128  
 129          li {
 130              border: calc(3 * var(--separator--height)) solid var(--global--color-border);
 131              padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 132  
 133              &:last-child {
 134                  padding-bottom: var(--global--spacing-vertical);
 135                  margin-bottom: var(--global--spacing-vertical);
 136              }
 137          }
 138  
 139          &:not(.is-grid) li {
 140              margin-top: var(--global--spacing-horizontal);
 141              margin-bottom: var(--global--spacing-horizontal);
 142          }
 143      }
 144  }