Reader: Fix left/right aligned images struggling paragraphs (#109104)

gabrielcaires · web-flow · commit ffe690ebadd5 · 2026-03-06T16:25:37.000Z
* Fix image sizing when it is followed by a paragraph

When the user set align-left/right to a image, we were not protecting the image to use too much space and struggle the content.
This change ensure the content is not struggled only if the next element is a p

* Improve selector
diff --git a/client/assets/stylesheets/shared/_rendered-blocks.scss b/client/assets/stylesheets/shared/_rendered-blocks.scss
@@ -111,6 +111,14 @@
 			margin-bottom: 12px;
 			margin-left: 32px;
 		}
+
+		/**
+		 * Sometimes we have figure inside the div.wp-block-image, in other cases we have figure.wp-block-image
+		 */
+		figure.wp-block-image:is(.alignleft, .alignright):has( + p),
+		.wp-block-image:has(figure.alignleft, figure.alignright):has( + p) {
+			max-width: 40%;
+		}
 	}
 
 	@include breakpoint-deprecated( "<660px" ) {

Original file line number	Diff line number	Diff line change
`@@ -111,6 +111,14 @@`
`111`	`111`	`margin-bottom: 12px;`
`112`	`112`	`margin-left: 32px;`
`113`	`113`	`}`
	`114`	`+`
	`115`	`+ /**`
	`116`	`+ * Sometimes we have figure inside the div.wp-block-image, in other cases we have figure.wp-block-image`
	`117`	`+ */`
	`118`	`+ figure.wp-block-image:is(.alignleft, .alignright):has( + p),`
	`119`	`+ .wp-block-image:has(figure.alignleft, figure.alignright):has( + p) {`
	`120`	`+ max-width: 40%;`
	`121`	`+ }`
`114`	`122`	`}`
`115`	`123`
`116`	`124`	`@include breakpoint-deprecated( "<660px" ) {`