| @@ -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 |
| @@ -97,9 +103,13 @@ | ||
| 97 | 103 | |
| 98 | 104 | .wp-block-image { |
| 99 | 105 | position: relative; |
| 100 | 106 | } |
| 101 | -.wp-block-image .is-applying img, .wp-block-image.is-transient img { | |
| 107 | +.wp-block-image.is-transient:not(.alignwide):not(.alignfull), .wp-block-image:has(img.is-swapping-media):not(.alignwide):not(.alignfull) { | |
| 108 | + width: fit-content; | |
| 109 | +} | |
| 110 | +.wp-block-image .is-applying img, .wp-block-image.is-transient img, | |
| 111 | +.wp-block-image img.is-swapping-media { | |
| 102 | 112 | opacity: 0.3; |
| 103 | 113 | } |
| 104 | 114 | .wp-block-image figcaption img { |
| 105 | 115 | display: inline; |
| @@ -110,8 +120,14 @@ | ||
| 110 | 120 | left: 50%; |
| 111 | 121 | transform: translate(-50%, -50%); |
| 112 | 122 | margin: 0; |
| 113 | 123 | } |
| 124 | +.wp-block-image .components-resizable-box__container { | |
| 125 | + pointer-events: none; | |
| 126 | +} | |
| 127 | +.wp-block-image .components-resizable-box__handle { | |
| 128 | + pointer-events: auto; | |
| 129 | +} | |
| 114 | 130 | |
| 115 | 131 | .wp-block-image__placeholder { |
| 116 | 132 | aspect-ratio: 4/3; |
| 117 | 133 | } |
| @@ -178,38 +194,8 @@ | ||
| 178 | 194 | } |
| 179 | 195 | |
| 180 | 196 | .wp-block[data-align]:has(> .wp-block-image) { |
| 181 | 197 | position: relative; |
| 182 | -} | |
| 183 | - | |
| 184 | -.wp-block-image__crop-area { | |
| 185 | - position: relative; | |
| 186 | - max-width: 100%; | |
| 187 | - width: 100%; | |
| 188 | - overflow: hidden; | |
| 189 | -} | |
| 190 | -.wp-block-image__crop-area .reactEasyCrop_Container { | |
| 191 | - pointer-events: auto; | |
| 192 | -} | |
| 193 | -.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image { | |
| 194 | - border: none; | |
| 195 | - border-radius: 0; | |
| 196 | -} | |
| 197 | - | |
| 198 | -.wp-block-image__crop-icon { | |
| 199 | - padding: 0 8px; | |
| 200 | - min-width: 48px; | |
| 201 | - display: flex; | |
| 202 | - justify-content: center; | |
| 203 | - align-items: center; | |
| 204 | -} | |
| 205 | -.wp-block-image__crop-icon svg { | |
| 206 | - fill: currentColor; | |
| 207 | -} | |
| 208 | - | |
| 209 | -.wp-block-image__zoom .components-popover__content { | |
| 210 | - min-width: 260px; | |
| 211 | - overflow: visible !important; | |
| 212 | 198 | } |
| 213 | 199 | |
| 214 | 200 | .wp-block-image__toolbar_content_textarea__container { |
| 215 | 201 | padding: 8px; |
