From 6f19386ae49c7d4b946c427c4cd7ee85a3774107 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 2 Oct 2023 13:33:01 +0200 Subject: [PATCH 01/15] Move lightbox open button after the image. --- lib/block-supports/behaviors.php | 29 ++++++++++++--------- packages/block-library/src/image/index.php | 29 ++++++++++++--------- packages/block-library/src/image/style.scss | 2 ++ packages/block-library/src/image/view.js | 4 +-- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 6f442d7b0d2d7..7c4f5dd4d1bd1 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -86,10 +86,12 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $alt_attribute = $processor->get_attribute( 'alt' ); + // An empty alt attribute `alt=""` is valid for decorative images. if ( null !== $alt_attribute ) { $alt_attribute = trim( $alt_attribute ); } + // It only makes sense to append the alt text to the button aria-label when the alt text is non-empty. if ( $alt_attribute ) { /* translators: %s: Image alt text. */ $aria_label = sprintf( __( 'Enlarge image: %s', 'gutenberg' ), $alt_attribute ); @@ -163,19 +165,20 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { // Wrap the image in the body content with a button. $img = null; preg_match( '/]+>/', $body_content, $img ); - $button = - '' - . $img[0]; + + $button = + $img[0] + . ''; + $body_content = preg_replace( '/]+>/', $button, $body_content ); // We need both a responsive image and an enlarged image to animate diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index cba0203b477a4..8b0cfd53927d9 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -126,10 +126,12 @@ function block_core_image_render_lightbox( $block_content, $block ) { $alt_attribute = $processor->get_attribute( 'alt' ); + // An empty alt attribute `alt=""` is valid for decorative images. if ( null !== $alt_attribute ) { $alt_attribute = trim( $alt_attribute ); } + // It only makes sense to append the alt text to the button aria-label when the alt text is non-empty. if ( $alt_attribute ) { /* translators: %s: Image alt text. */ $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute ); @@ -200,19 +202,20 @@ function block_core_image_render_lightbox( $block_content, $block ) { // Wrap the image in the body content with a button. $img = null; preg_match( '/]+>/', $body_content, $img ); - $button = - '' - . $img[0]; + + $button = + $img[0] + . ''; + $body_content = preg_replace( '/]+>/', $button, $body_content ); // We need both a responsive image and an enlarged image to animate diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 752ff773394a4..32482f8767715 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -154,6 +154,8 @@ .wp-lightbox-container { position: relative; + display: flex; + flex-direction: column; button { border: none; diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index 13f20c9cd7cb6..ae621a527bfc9 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -360,9 +360,9 @@ function setStyles( context, event ) { naturalHeight, offsetWidth: originalWidth, offsetHeight: originalHeight, - } = event.target.nextElementSibling; + } = event.target.previousElementSibling; let { x: screenPosX, y: screenPosY } = - event.target.nextElementSibling.getBoundingClientRect(); + event.target.previousElementSibling.getBoundingClientRect(); // Natural ratio of the image clicked to open the lightbox. const naturalRatio = naturalWidth / naturalHeight; From 649b4a0a053d1bb958fca49ceff62c3dccb9bc40 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 2 Oct 2023 13:34:54 +0200 Subject: [PATCH 02/15] Fix getting the lightbox image alt attribute. --- lib/block-supports/behaviors.php | 5 ++++- packages/block-library/src/image/index.php | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 7c4f5dd4d1bd1..813ccf1375610 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -84,6 +84,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $aria_label = __( 'Enlarge image', 'gutenberg' ); + $processor->next_tag( 'img' ); $alt_attribute = $processor->get_attribute( 'alt' ); // An empty alt attribute `alt=""` is valid for decorative images. @@ -96,7 +97,9 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { /* translators: %s: Image alt text. */ $aria_label = sprintf( __( 'Enlarge image: %s', 'gutenberg' ), $alt_attribute ); } - $content = $processor->get_updated_html(); + + $processor = new WP_HTML_Tag_Processor( $block_content ); + $content = $processor->get_updated_html(); // If we don't set a default, it won't work if Lightbox is set to enabled by default. $lightbox_animation = 'zoom'; diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 8b0cfd53927d9..5abe4b6557d93 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -124,6 +124,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { $aria_label = __( 'Enlarge image' ); + $processor->next_tag( 'img' ); $alt_attribute = $processor->get_attribute( 'alt' ); // An empty alt attribute `alt=""` is valid for decorative images. @@ -136,7 +137,9 @@ function block_core_image_render_lightbox( $block_content, $block ) { /* translators: %s: Image alt text. */ $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute ); } - $content = $processor->get_updated_html(); + + $processor = new WP_HTML_Tag_Processor( $block_content ); + $content = $processor->get_updated_html(); // Currently, we are only enabling the zoom animation. $lightbox_animation = 'zoom'; From c9bedb09ed2593d804cee1ac926ae957477b8fe9 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 3 Oct 2023 09:53:01 +0200 Subject: [PATCH 03/15] Improve docblocks. --- packages/block-library/src/image/index.php | 31 +++++++++++++--------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 5abe4b6557d93..4cd90d4a0f74c 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -9,10 +9,11 @@ * Renders the `core/image` block on the server, * adding a data-id attribute to the element if core/gallery has added on pre-render. * - * @param array $attributes The block attributes. - * @param string $content The block content. - * @param WP_Block $block The block object. - * @return string Returns the block content with the data-id attribute added. + * @param array $attributes The block attributes. + * @param string $content The block content. + * @param WP_Block $block The block object. + * + * @return string The block content with the data-id attribute added. */ function render_block_core_image( $attributes, $content, $block ) { @@ -76,12 +77,13 @@ function render_block_core_image( $attributes, $content, $block ) { } /** - * Add the lightboxEnabled flag to the block data. + * Adds the lightboxEnabled flag to the block data. * * This is used to determine whether the lightbox should be rendered or not. * - * @param array $block Block data. - * @return array Filtered block data. + * @param array $block Block data. + * + * @return array Filtered block data. */ function block_core_image_get_lightbox_settings( $block ) { // Get the lightbox setting from the block attributes. @@ -113,11 +115,12 @@ function block_core_image_get_lightbox_settings( $block ) { } /** - * Add the directives and layout needed for the lightbox behavior. + * Adds the directives and layout needed for the lightbox behavior. + * + * @param string $block_content Rendered block content. + * @param array $block Block object. * - * @param string $block_content Rendered block content. - * @param array $block Block object. - * @return string Filtered block content. + * @return string Filtered block content. */ function block_core_image_render_lightbox( $block_content, $block ) { $processor = new WP_HTML_Tag_Processor( $block_content ); @@ -308,11 +311,13 @@ function block_core_image_render_lightbox( $block_content, $block ) { } /** - * Ensure that the view script has the `wp-interactivity` dependency. + * Ensures that the view script has the `wp-interactivity` dependency. * * @since 6.4.0 * * @global WP_Scripts $wp_scripts + * + * @return void */ function block_core_image_ensure_interactivity_dependency() { global $wp_scripts; @@ -328,6 +333,8 @@ function block_core_image_ensure_interactivity_dependency() { /** * Registers the `core/image` block on server. + * + * @return void */ function register_block_core_image() { register_block_type_from_metadata( From b8fa8f2263114256dc0a1b99cc9a3aeb0de10de9 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 3 Oct 2023 14:05:33 +0200 Subject: [PATCH 04/15] Do not render empty role attribute. --- packages/block-library/src/image/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index ae621a527bfc9..ac016b0ed2214 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -227,7 +227,7 @@ store( roleAttribute: ( { context } ) => { return context.core.image.lightboxEnabled ? 'dialog' - : ''; + : null; }, lightboxObjectFit: ( { context } ) => { if ( context.core.image.initialized ) { From eadf211806057743c5ee0a0fc5128168a6106bae Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 3 Oct 2023 15:09:04 +0200 Subject: [PATCH 05/15] Remove unnecessary aria-hidden attribute. --- packages/block-library/src/image/index.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 4cd90d4a0f74c..add7ed52388f9 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -287,8 +287,6 @@ function block_core_image_render_lightbox( $block_content, $block ) { data-wp-class--initialized="context.core.image.initialized" data-wp-class--active="context.core.image.lightboxEnabled" data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled" - data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled" - aria-hidden="true" data-wp-bind--aria-modal="context.core.image.lightboxEnabled" aria-modal="false" data-wp-effect="effects.core.image.initLightbox" From 1e6ea11755da8faa92cb3620cfca53d261b708e5 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 3 Oct 2023 15:35:33 +0200 Subject: [PATCH 06/15] Set aria-modal attribute dynamically. --- packages/block-library/src/image/index.php | 3 +-- packages/block-library/src/image/view.js | 5 +++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index add7ed52388f9..798214244aceb 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -287,8 +287,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { data-wp-class--initialized="context.core.image.initialized" data-wp-class--active="context.core.image.lightboxEnabled" data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled" - data-wp-bind--aria-modal="context.core.image.lightboxEnabled" - aria-modal="false" + data-wp-bind--aria-modal="selectors.core.image.ariaModal" data-wp-effect="effects.core.image.initLightbox" data-wp-on--keydown="actions.core.image.handleKeydown" data-wp-on--touchstart="actions.core.image.handleTouchStart" diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index ac016b0ed2214..81114f81a29f1 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -229,6 +229,11 @@ store( ? 'dialog' : null; }, + ariaModal: ( { context } ) => { + return context.core.image.lightboxEnabled + ? 'true' + : null; + }, lightboxObjectFit: ( { context } ) => { if ( context.core.image.initialized ) { return 'cover'; From d568e5ae9bde8cbc5a3fa51fe69d03c541c9a61c Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 3 Oct 2023 15:55:38 +0200 Subject: [PATCH 07/15] More meaningful and simpler modal dialog aria-label. --- lib/block-supports/behaviors.php | 2 +- packages/block-library/src/image/index.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 813ccf1375610..28f0b58e2e2fd 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -225,7 +225,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $close_button_icon = ''; $close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) ); - $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image', 'gutenberg' ); + $dialog_label = esc_attr__( 'Enlarged image', 'gutenberg' ); $close_button_label = esc_attr__( 'Close', 'gutenberg' ); $lightbox_html = << Date: Tue, 3 Oct 2023 16:52:36 +0200 Subject: [PATCH 08/15] Increase Close button target size. --- packages/block-library/src/image/style.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 32482f8767715..2ef602982e57b 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -195,11 +195,16 @@ .close-button { position: absolute; - top: calc(env(safe-area-inset-top) + 20px); - right: calc(env(safe-area-inset-right) + 20px); + top: calc(env(safe-area-inset-top) + 16px); // equivalent to $grid-unit-20 + right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20 padding: 0; cursor: pointer; z-index: 5000000; + min-width: 40px; // equivalent to $button-size-next-default-40px + min-height: 40px; // equivalent to $button-size-next-default-40px + display: flex; + align-items: center; + justify-content: center; &:hover, &:focus, From cbbfabd345d1de8d2aa4a3af44e08957629809e5 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 4 Oct 2023 12:32:36 +0200 Subject: [PATCH 09/15] Add enlarged image base64 encoded placeholder. --- packages/block-library/src/image/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index 81114f81a29f1..baeeee34871ff 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -242,7 +242,7 @@ store( enlargedImgSrc: ( { context } ) => { return context.core.image.initialized ? context.core.image.imageUploadedSrc - : ''; + : 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='; }, }, }, From b2b56cbc0ddae2d5736b9f8aa17a5447db922ffd Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 4 Oct 2023 13:12:26 +0200 Subject: [PATCH 10/15] Better check for alt attribute as a string. --- lib/block-supports/behaviors.php | 2 +- packages/block-library/src/image/index.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 28f0b58e2e2fd..a04193a0748a5 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -88,7 +88,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $alt_attribute = $processor->get_attribute( 'alt' ); // An empty alt attribute `alt=""` is valid for decorative images. - if ( null !== $alt_attribute ) { + if ( is_string( $alt_attribute ) ) { $alt_attribute = trim( $alt_attribute ); } diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 3fe86c859d0cd..3dd72894fd829 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -131,7 +131,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { $alt_attribute = $processor->get_attribute( 'alt' ); // An empty alt attribute `alt=""` is valid for decorative images. - if ( null !== $alt_attribute ) { + if ( is_string( $alt_attribute ) ) { $alt_attribute = trim( $alt_attribute ); } From 7f9996be42a5af4a6139713fe139fdeec01533cb Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Wed, 4 Oct 2023 13:25:53 +0200 Subject: [PATCH 11/15] Update changelog. --- packages/interactivity/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 9227e028a8dfe..799db2de1bc73 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fix + +- Fix lightbox missing alt attribute and improve accessibility. ([#54608](https://github.com/WordPress/gutenberg/pull/55010)) + ## 2.4.0 (2023-10-05) ## 2.3.0 (2023-09-20) From b887286eeb24ee38607b186fced27e3dce614b8a Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 5 Oct 2023 13:27:43 +0200 Subject: [PATCH 12/15] Move changelog entry to the block library changelog. --- packages/block-library/CHANGELOG.md | 5 +++++ packages/interactivity/CHANGELOG.md | 4 ---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 075a5d472b3fb..5598b49bcad76 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Bug Fix + +- Fix Image block lightbox missing alt attribute and improve accessibility. ([#54608](https://github.com/WordPress/gutenberg/pull/55010)) + + ## 8.20.0 (2023-10-05) ## 8.19.0 (2023-09-20) diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 799db2de1bc73..9227e028a8dfe 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,10 +2,6 @@ ## Unreleased -### Bug Fix - -- Fix lightbox missing alt attribute and improve accessibility. ([#54608](https://github.com/WordPress/gutenberg/pull/55010)) - ## 2.4.0 (2023-10-05) ## 2.3.0 (2023-09-20) From 43e6be85f249885137e2cf18edfa211c60a0c024 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 5 Oct 2023 15:18:43 +0200 Subject: [PATCH 13/15] Set lightbox dialog aria-label dynamically. --- packages/block-library/src/image/index.php | 9 +++++---- packages/block-library/src/image/view.js | 5 +++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 3dd72894fd829..a5efd208ef56a 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -188,7 +188,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { "imageCurrentSrc": "", "targetWidth": "%s", "targetHeight": "%s", - "scaleAttr": "%s" + "scaleAttr": "%s", + "dialogLabel": "%s" } } }', @@ -196,7 +197,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { $img_uploaded_src, $img_width, $img_height, - $scale_attr + $scale_attr, + __( 'Enlarged image' ) ) ); $w->next_tag( 'img' ); @@ -277,13 +279,12 @@ function block_core_image_render_lightbox( $block_content, $block ) { } $close_button_icon = ''; - $dialog_label = esc_attr__( 'Enlarged image' ); $close_button_label = esc_attr__( 'Close' ); $lightbox_html = << { + return context.core.image.lightboxEnabled + ? context.core.image.dialogLabel + : null; + }, lightboxObjectFit: ( { context } ) => { if ( context.core.image.initialized ) { return 'cover'; From cea0f32ad02738ded53e51f48e7ce34e21736dcf Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Thu, 5 Oct 2023 15:22:46 +0200 Subject: [PATCH 14/15] Hide background scrim container from assistive technology. --- packages/block-library/src/image/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index a5efd208ef56a..d3eb7a4e4c738 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -301,7 +301,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
$initial_image_content
$enlarged_image_content
-
+ HTML; From ae939eb96a992f91308386df6c1e54e64af180ef Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 5 Oct 2023 17:21:26 -0500 Subject: [PATCH 15/15] Remove obsolete code --- lib/block-supports/behaviors.php | 17 ++++++----------- lib/load.php | 1 + packages/block-library/src/image/index.php | 17 ++++++----------- 3 files changed, 13 insertions(+), 22 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index a04193a0748a5..c1b3dceceee94 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -98,26 +98,21 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $aria_label = sprintf( __( 'Enlarge image: %s', 'gutenberg' ), $alt_attribute ); } - $processor = new WP_HTML_Tag_Processor( $block_content ); - $content = $processor->get_updated_html(); - // If we don't set a default, it won't work if Lightbox is set to enabled by default. $lightbox_animation = 'zoom'; if ( isset( $lightbox_settings['animation'] ) && '' !== $lightbox_settings['animation'] ) { $lightbox_animation = $lightbox_settings['animation']; } - // We want to store the src in the context so we can set it dynamically when the lightbox is opened. - $z = new WP_HTML_Tag_Processor( $content ); - $z->next_tag( 'img' ); - + // Note: We want to store the `src` in the context so we + // can set it dynamically when the lightbox is opened. if ( isset( $block['attrs']['id'] ) ) { $img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] ); $img_metadata = wp_get_attachment_metadata( $block['attrs']['id'] ); $img_width = $img_metadata['width']; $img_height = $img_metadata['height']; } else { - $img_uploaded_src = $z->get_attribute( 'src' ); + $img_uploaded_src = $processor->get_attribute( 'src' ); $img_width = 'none'; $img_height = 'none'; } @@ -128,7 +123,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $scale_attr = false; } - $w = new WP_HTML_Tag_Processor( $content ); + $w = new WP_HTML_Tag_Processor( $block_content ); $w->next_tag( 'figure' ); $w->add_class( 'wp-lightbox-container' ); $w->set_attribute( 'data-wp-interactive', true ); @@ -189,7 +184,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { // image is a copy of the one in the body, which animates immediately // as the lightbox is opened, while the enlarged one is a full-sized // version that will likely still be loading as the animation begins. - $m = new WP_HTML_Tag_Processor( $content ); + $m = new WP_HTML_Tag_Processor( $block_content ); $m->next_tag( 'figure' ); $m->add_class( 'responsive-image' ); $m->next_tag( 'img' ); @@ -205,7 +200,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' ); $initial_image_content = $m->get_updated_html(); - $q = new WP_HTML_Tag_Processor( $content ); + $q = new WP_HTML_Tag_Processor( $block_content ); $q->next_tag( 'figure' ); $q->add_class( 'enlarged-image' ); $q->next_tag( 'img' ); diff --git a/lib/load.php b/lib/load.php index a3a61407764b5..33176c422b221 100644 --- a/lib/load.php +++ b/lib/load.php @@ -247,3 +247,4 @@ function () { require __DIR__ . '/block-supports/duotone.php'; require __DIR__ . '/block-supports/shadow.php'; require __DIR__ . '/block-supports/background.php'; +require __DIR__ . '/block-supports/behaviors.php'; diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index d3eb7a4e4c738..bfc3af8754bc1 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -141,23 +141,18 @@ function block_core_image_render_lightbox( $block_content, $block ) { $aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute ); } - $processor = new WP_HTML_Tag_Processor( $block_content ); - $content = $processor->get_updated_html(); - // Currently, we are only enabling the zoom animation. $lightbox_animation = 'zoom'; - // We want to store the src in the context so we can set it dynamically when the lightbox is opened. - $z = new WP_HTML_Tag_Processor( $content ); - $z->next_tag( 'img' ); - + // Note: We want to store the `src` in the context so we + // can set it dynamically when the lightbox is opened. if ( isset( $block['attrs']['id'] ) ) { $img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] ); $img_metadata = wp_get_attachment_metadata( $block['attrs']['id'] ); $img_width = $img_metadata['width']; $img_height = $img_metadata['height']; } else { - $img_uploaded_src = $z->get_attribute( 'src' ); + $img_uploaded_src = $processor->get_attribute( 'src' ); $img_width = 'none'; $img_height = 'none'; } @@ -168,7 +163,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { $scale_attr = false; } - $w = new WP_HTML_Tag_Processor( $content ); + $w = new WP_HTML_Tag_Processor( $block_content ); $w->next_tag( 'figure' ); $w->add_class( 'wp-lightbox-container' ); $w->set_attribute( 'data-wp-interactive', true ); @@ -231,7 +226,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { // image is a copy of the one in the body, which animates immediately // as the lightbox is opened, while the enlarged one is a full-sized // version that will likely still be loading as the animation begins. - $m = new WP_HTML_Tag_Processor( $content ); + $m = new WP_HTML_Tag_Processor( $block_content ); $m->next_tag( 'figure' ); $m->add_class( 'responsive-image' ); $m->next_tag( 'img' ); @@ -247,7 +242,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { $m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' ); $initial_image_content = $m->get_updated_html(); - $q = new WP_HTML_Tag_Processor( $content ); + $q = new WP_HTML_Tag_Processor( $block_content ); $q->next_tag( 'figure' ); $q->add_class( 'enlarged-image' ); $q->next_tag( 'img' );