From bc851aaf42b655f9abdb1d85bd2e7cbac7bc8176 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 9 Feb 2022 09:57:08 +0100 Subject: [PATCH] Remove the div wrapper from the aligned image blocks --- lib/block-supports/layout.php | 33 ++++++ .../block-library/src/image/deprecated.js | 106 +++++++++++++++++- packages/block-library/src/image/save.js | 8 -- .../blocks/core__image__center-caption.html | 2 +- .../core__image__center-caption.parsed.json | 4 +- ...ore__image__center-caption.serialized.html | 2 +- .../core__image__deprecated-1.serialized.html | 2 +- .../core__image__deprecated-2.serialized.html | 2 +- .../core__image__deprecated-3.serialized.html | 2 +- ...core__image__deprecated-align-wrapper.html | 3 + ...core__image__deprecated-align-wrapper.json | 23 ++++ ...mage__deprecated-align-wrapper.parsed.json | 23 ++++ ...__deprecated-align-wrapper.serialized.html | 3 + .../fixtures/documents/wordpress-out.html | 2 +- 14 files changed, 198 insertions(+), 17 deletions(-) create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 784b3b86523223..5ba02a5f6d1061 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -233,3 +233,36 @@ function( $matches ) { remove_filter( 'render_block', 'wp_restore_group_inner_container', 10, 2 ); } add_filter( 'render_block', 'gutenberg_restore_group_inner_container', 10, 2 ); + + +/** + * For themes without theme.json file, make sure + * to restore the outer div for the aligned image block + * to avoid breaking styles relying on that div. + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function gutenberg_restore_image_outer_container( $block_content, $block ) { + $image_with_align = '/(^\s*]*)wp-block-image\s([^"]*((alignleft)|(alignright)|(aligncenter))(\s|")[^>]*>((.|\S|\s)*)<\/figure>)/U'; + + if ( + 'core/image' !== $block['blockName'] || + WP_Theme_JSON_Resolver::theme_has_support() || + 0 === preg_match( $image_with_align, $block_content ) + ) { + return $block_content; + } + + $updated_content = preg_replace_callback( + $image_with_align, + static function( $matches ) { + return '
' . $matches[1] . $matches[2] . '
'; + }, + $block_content + ); + return $updated_content; +} + +add_filter( 'render_block', 'gutenberg_restore_image_outer_container', 10, 2 ); diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index 0a3c2142636c65..99c261dbc1a054 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -2,11 +2,12 @@ * External dependencies */ import classnames from 'classnames'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies */ -import { RichText } from '@wordpress/block-editor'; +import { RichText, useBlockProps } from '@wordpress/block-editor'; const blockAttributes = { align: { @@ -68,7 +69,110 @@ const blockAttributes = { }, }; +const blockSupports = { + anchor: true, + color: { + __experimentalDuotone: 'img', + text: false, + background: false, + }, + __experimentalBorder: { + radius: true, + __experimentalDefaultControls: { + radius: true, + }, + }, +}; + const deprecated = [ + { + attributes: { + ...blockAttributes, + title: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'title', + }, + sizeSlug: { + type: 'string', + }, + }, + supports: blockSupports, + save( { attributes } ) { + const { + url, + alt, + caption, + align, + href, + rel, + linkClass, + width, + height, + id, + linkTarget, + sizeSlug, + title, + } = attributes; + + const newRel = isEmpty( rel ) ? undefined : rel; + + const classes = classnames( { + [ `align${ align }` ]: align, + [ `size-${ sizeSlug }` ]: sizeSlug, + 'is-resized': width || height, + } ); + + const image = ( + { + ); + + const figure = ( + <> + { href ? ( + + { image } + + ) : ( + image + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } + + ); + + if ( 'left' === align || 'right' === align || 'center' === align ) { + return ( +
+
{ figure }
+
+ ); + } + + return ( +
+ { figure } +
+ ); + }, + }, { attributes: blockAttributes, save( { attributes } ) { diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index ccf816c121e909..8dd3859c1546dc 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -65,14 +65,6 @@ export default function save( { attributes } ) { ); - if ( 'left' === align || 'right' === align || 'center' === align ) { - return ( -
-
{ figure }
-
- ); - } - return (
{ figure } diff --git a/test/integration/fixtures/blocks/core__image__center-caption.html b/test/integration/fixtures/blocks/core__image__center-caption.html index 1f5d724f5498ec..046800a80bc98a 100644 --- a/test/integration/fixtures/blocks/core__image__center-caption.html +++ b/test/integration/fixtures/blocks/core__image__center-caption.html @@ -1,3 +1,3 @@ -
Give it a try. Press the "really wide" button on the image toolbar.
+
Give it a try. Press the "really wide" button on the image toolbar.
diff --git a/test/integration/fixtures/blocks/core__image__center-caption.parsed.json b/test/integration/fixtures/blocks/core__image__center-caption.parsed.json index e189c9fa7c45f7..27b4e57ed45881 100644 --- a/test/integration/fixtures/blocks/core__image__center-caption.parsed.json +++ b/test/integration/fixtures/blocks/core__image__center-caption.parsed.json @@ -5,9 +5,9 @@ "align": "center" }, "innerBlocks": [], - "innerHTML": "\n
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
\n", + "innerHTML": "\n
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
\n", "innerContent": [ - "\n
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
\n" + "\n
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__image__center-caption.serialized.html b/test/integration/fixtures/blocks/core__image__center-caption.serialized.html index fe1a5c2b03a13c..785def42a5d91f 100644 --- a/test/integration/fixtures/blocks/core__image__center-caption.serialized.html +++ b/test/integration/fixtures/blocks/core__image__center-caption.serialized.html @@ -1,3 +1,3 @@ -
Give it a try. Press the "really wide" button on the image toolbar.
+
Give it a try. Press the "really wide" button on the image toolbar.
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html index 3b55fa1c3de09a..30a0827e7eea8b 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-1.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html index 723951075ee44d..eb06f249748638 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-2.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html index 723951075ee44d..eb06f249748638 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-3.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html new file mode 100644 index 00000000000000..68626f719fbcdb --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.html @@ -0,0 +1,3 @@ + +
+ \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json new file mode 100644 index 00000000000000..c613b3716e8f0b --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.json @@ -0,0 +1,23 @@ +[ + { + "name": "core/image", + "isValid": true, + "attributes": { + "align": "left", + "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", + "alt": "", + "caption": "", + "id": 13, + "width": 358, + "height": 164, + "linkDestination": "none", + "sizeSlug": "large", + "style": { + "border": { + "radius": "10px" + } + } + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json new file mode 100644 index 00000000000000..82c2a2ac866b19 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.parsed.json @@ -0,0 +1,23 @@ +[ + { + "blockName": "core/image", + "attrs": { + "align": "left", + "id": 13, + "width": 358, + "height": 164, + "sizeSlug": "large", + "linkDestination": "none", + "style": { + "border": { + "radius": "10px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\"\"
\n", + "innerContent": [ + "\n
\"\"
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html new file mode 100644 index 00000000000000..5037f335ad989e --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-align-wrapper.serialized.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/documents/wordpress-out.html b/test/integration/fixtures/documents/wordpress-out.html index 42087da595b2a6..9c098b70a42e69 100644 --- a/test/integration/fixtures/documents/wordpress-out.html +++ b/test/integration/fixtures/documents/wordpress-out.html @@ -27,7 +27,7 @@

Shortcode

-
+