| 1 | *** a/wp-content/themes/twentynineteen/style.css |
|---|
| 2 | --- b/wp-content/themes/twentynineteen/style.css |
|---|
| 3 | @@ |
|---|
| 4 | /* -------------------------------------------------------------- |
|---|
| 5 | 5.0 Blocks |
|---|
| 6 | -------------------------------------------------------------- */ |
|---|
| 7 | |
|---|
| 8 | +/** |
|---|
| 9 | + * Fix: Classic Editor right-aligned, uncaptioned images inside <p> |
|---|
| 10 | + * should extend (bleed) beyond the content column like other right-aligned elements. |
|---|
| 11 | + * See: https://github.com/WordPress/twentynineteen/issues/688 |
|---|
| 12 | + */ |
|---|
| 13 | +@media screen and (min-width: 768px) { |
|---|
| 14 | + .entry .entry-content p > img.alignright, |
|---|
| 15 | + .entry .entry-summary p > img.alignright { |
|---|
| 16 | + /* Ensure the image can exceed the paragraph's max-width */ |
|---|
| 17 | + max-width: none; |
|---|
| 18 | + height: auto; |
|---|
| 19 | + |
|---|
| 20 | + /* Keep it floated right, but let it bleed outside the text column */ |
|---|
| 21 | + float: right; |
|---|
| 22 | + /* Pull image to the right by half the leftover viewport width outside the content column */ |
|---|
| 23 | + margin-right: calc((100vw - 100%) / -2); |
|---|
| 24 | + |
|---|
| 25 | + /* Maintain the default spacing on the left so text wraps nicely */ |
|---|
| 26 | + margin-left: 1.5em; |
|---|
| 27 | + } |
|---|
| 28 | + |
|---|
| 29 | + /* Avoid overflow clipping on the paragraph wrapper in certain browsers */ |
|---|
| 30 | + .entry .entry-content p:has(> img.alignright), |
|---|
| 31 | + .entry .entry-summary p:has(> img.alignright) { |
|---|
| 32 | + overflow: visible; |
|---|
| 33 | + } |
|---|
| 34 | +} |
|---|
| 35 | + |
|---|
| 36 | /* Group */ |
|---|
| 37 | .wp-block-group.has-background, |
|---|
| 38 | .wp-block-group__inner-container.has-background { |
|---|
| 39 | padding: 1.25em 2.375em; |
|---|
| 40 | } |
|---|