_editor.scss (3726B)
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 }