| @@ -67,8 +67,14 @@ | ||
| 67 | 67 | /** |
| 68 | 68 | * Focus styles. |
| 69 | 69 | */ |
| 70 | 70 | /** |
| 71 | + * Standard focus rings for the WordPress Design System. | |
| 72 | + * | |
| 73 | + * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site, | |
| 74 | + * e.g. `&:focus { @include outset-ring__focus(); }`. | |
| 75 | + */ | |
| 76 | +/** | |
| 71 | 77 | * Applies editor left position to the selector passed as argument |
| 72 | 78 | */ |
| 73 | 79 | /** |
| 74 | 80 | * Styles that are reused verbatim in a few places |
| @@ -86,17 +92,21 @@ | ||
| 86 | 92 | /** |
| 87 | 93 | * Creates a checkerboard pattern background to indicate transparency. |
| 88 | 94 | * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px. |
| 89 | 95 | */ |
| 90 | -:root :where(figure.wp-block-gallery) { | |
| 96 | +:root :where(figure.wp-block-gallery.is-layout-flex) { | |
| 91 | 97 | display: block; |
| 92 | 98 | } |
| 93 | -:root :where(figure.wp-block-gallery) > .blocks-gallery-caption { | |
| 99 | +:root :where(figure.wp-block-gallery.is-layout-flex) > .blocks-gallery-caption { | |
| 94 | 100 | flex: 0 0 100%; |
| 95 | 101 | } |
| 96 | -:root :where(figure.wp-block-gallery) > .blocks-gallery-media-placeholder-wrapper { | |
| 97 | - flex-basis: 100%; | |
| 102 | + | |
| 103 | +:root :where(.wp-block-gallery.is-layout-grid) > .blocks-gallery-caption, | |
| 104 | +:root :where(.wp-block-gallery.is-layout-grid) > .components-placeholder, | |
| 105 | +:root :where(.wp-block-gallery.is-layout-grid) > .block-editor-media-placeholder { | |
| 106 | + grid-column: 1/-1; | |
| 98 | 107 | } |
| 108 | + | |
| 99 | 109 | :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .components-placeholder__label { |
| 100 | 110 | display: none; |
| 101 | 111 | } |
| 102 | 112 | :root :where(figure.wp-block-gallery) .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button { |
| @@ -171,5 +181,26 @@ | ||
| 171 | 181 | .wp-block-update-gallery-modal-buttons { |
| 172 | 182 | display: flex; |
| 173 | 183 | justify-content: flex-end; |
| 174 | 184 | gap: 12px; |
| 185 | +} | |
| 186 | + | |
| 187 | +.wp-block-gallery__source-settings { | |
| 188 | + grid-column: 1/-1; | |
| 189 | + display: flex; | |
| 190 | + flex-direction: column; | |
| 191 | + gap: 8px; | |
| 192 | +} | |
| 193 | +.wp-block-gallery__source-settings .wp-block-gallery__source-description { | |
| 194 | + margin: 0; | |
| 195 | + color: #757575; | |
| 196 | + font-size: 12px; | |
| 197 | +} | |
| 198 | +.wp-block-gallery__source-settings .components-button { | |
| 199 | + justify-content: center; | |
| 200 | + width: 100%; | |
| 201 | +} | |
| 202 | + | |
| 203 | +.wp-block-gallery__source-notice { | |
| 204 | + grid-column: 1/-1; | |
| 205 | + margin: 0; | |
| 175 | 206 | } |
