_style.scss (4810B)
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 }