Skip to content

Commit

Permalink
Fix frontend implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@luisherranz
luisherranz committed Feb 19, 2025
1 parent 3387ac0 commit fd51250
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 208 deletions.
93 changes: 26 additions & 67 deletions packages/block-library/src/gallery/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,12 +135,10 @@ function block_core_gallery_render( $attributes, $content, $block ) {

wp_style_engine_get_stylesheet_from_css_rules(
$gallery_styles,
array(
'context' => 'block-supports',
)
array( 'context' => 'block-supports' )
);

// Get all image IDs from the state that match this gallery's ID.
// Gets all image IDs from the state that match this gallery's ID.
$state = wp_interactivity_state( 'core/image' );
$gallery_id = $block->context['galleryId'] ?? null;
$image_ids = array();
Expand All @@ -156,14 +154,34 @@ function block_core_gallery_render( $attributes, $content, $block ) {
$processed_content->set_attribute(
'data-wp-context',
wp_json_encode(
array(
'images' => $image_ids,
),
array( 'galleryId' => $gallery_id ),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
)
);

add_filter( 'render_block_core/gallery', 'block_core_gallery_render_lightbox' );
// Populates the aria label for each image in the gallery.
if ( ! empty( $image_ids ) ) {
if ( 1 <= count( $image_ids ) ) {
for ( $i = 0; $i < count( $image_ids ); $i++ ) {
$image_id = $image_ids[ $i ];
$alt = $state['metadata'][ $image_id ]['alt'];
wp_interactivity_state(
'core/image',
array(
'metadata' => array(
$image_id => array(
'customAriaLabel' => empty( $alt )
/* translators: %1$s: current image index, %2$s: total number of images */
? sprintf( __( 'Enlarged image %1$s of %2$s' ), $i + 1, count( $image_ids ) )
/* translators: %1$s: current image index, %2$s: total number of images, %3$s: Image alt text */
: sprintf( __( 'Enlarged image %1$s of %2$s: %3$s' ), $i + 1, count( $image_ids ), $alt ),
),
),
)
);
}
}
}

// The WP_HTML_Tag_Processor class calls get_updated_html() internally
// when the instance is treated as a string, but here we explicitly
Expand Down Expand Up @@ -211,65 +229,6 @@ static function () use ( $image_blocks, &$i ) {
return $content;
}

/**
* Handles state updates needed for the lightbox behavior in a Gallery Block.
*
* Now that the Gallery Block contains inner Image Blocks,
* we add translations for the screen reader text before rendering the gallery
* so that the Image Block can pick it up in its render_callback.
*
* @since 6.7.0
*
* @param string $block_content Rendered block content.
*
* @return string Filtered block content.
*/
function block_core_gallery_render_lightbox( $block_content ) {
$state = wp_interactivity_state( 'core/gallery' );
$gallery_id = $state['galleryId'];
$images = $state['images'][ $gallery_id ] ?? array();
$translations = array();

if ( ! empty( $images ) ) {
if ( 1 === count( $images ) ) {
$image_id = $images[0];
$translations[ $image_id ] = __( 'Enlarged image', 'gutenberg' );
} else {
for ( $i = 0; $i < count( $images ); $i++ ) {
$image_id = $images[ $i ];
/* translators: %1$s: current image index, %2$s: total number of images */
$translations[ $image_id ] = sprintf( __( 'Enlarged image %1$s of %2$s', 'gutenberg' ), $i + 1, count( $images ) );
}
}

$image_state = wp_interactivity_state( 'core/image' );

foreach ( $translations as $image_id => $translation ) {
$alt = $image_state['metadata'][ $image_id ]['alt'];
wp_interactivity_state(
'core/image',
array(
'metadata' => array(
$image_id => array(
'screenReaderText' => empty( $alt ) ? $translation : "$translation: $alt",
),
),
)
);
}
}

// reset galleryId
wp_interactivity_state(
'core/gallery',
array(
'galleryId' => null,
)
);

return $block_content;
}

/**
* Registers the `core/gallery` block on server.
*
Expand Down
52 changes: 30 additions & 22 deletions packages/block-library/src/image/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,21 +143,30 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
* lightbox behavior.
*/
$p = new WP_HTML_Tag_Processor( $block_content );

if ( $p->next_tag( 'figure' ) ) {
$p->set_bookmark( 'figure' );
}
if ( ! $p->next_tag( 'img' ) ) {
return $block_content;
}

$alt = $p->get_attribute( 'alt' );
$img_uploaded_src = $p->get_attribute( 'src' );
$img_class_names = $p->get_attribute( 'class' );
$img_styles = $p->get_attribute( 'style' );
$img_width = 'none';
$img_height = 'none';
$aria_label = __( 'Enlarge' );
$dialog_aria_label = __( 'Enlarged image' );
$alt = $p->get_attribute( 'alt' );
$img_uploaded_src = $p->get_attribute( 'src' );
$img_class_names = $p->get_attribute( 'class' );
$img_styles = $p->get_attribute( 'style' );
$img_width = 'none';
$img_height = 'none';

wp_interactivity_config(
'core/image',
array( 'defaultAriaLabel' => __( 'Enlarged image' ) )
);

if ( $alt ) {
/* translators: %s: Image alt text. */
$custom_aria_label = sprintf( __( 'Enlarged image: %s' ), $alt );
}

if ( isset( $block['attrs']['id'] ) ) {
$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
Expand Down Expand Up @@ -186,10 +195,9 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
'targetWidth' => $img_width,
'targetHeight' => $img_height,
'scaleAttr' => $block['attrs']['scale'] ?? false,
'ariaLabel' => $dialog_aria_label,
'alt' => $alt,
'screenReaderText' => empty( $alt ) ? $screen_reader_text : "$screen_reader_text: $alt",
'galleryId' => $block_instance->context['galleryId'] ?? null,
'customAriaLabel' => $custom_aria_label ?? null,
),
),
)
Expand All @@ -200,9 +208,7 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
$p->set_attribute(
'data-wp-context',
wp_json_encode(
array(
'imageId' => $unique_image_id,
),
array( 'imageId' => $unique_image_id ),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
)
);
Expand Down Expand Up @@ -231,11 +237,11 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="' . esc_attr( $aria_label ) . '"
aria-label="' . esc_attr( __( 'Enlarge' ) ) . '"
data-wp-init="callbacks.initTriggerButton"
data-wp-on-async--click="actions.showLightbox"
data-wp-style--right="state.imageButtonRight"
data-wp-style--top="state.imageButtonTop"
data-wp-style--right="state.thisImage.buttonRight"
data-wp-style--top="state.thisImage.buttonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
Expand Down Expand Up @@ -280,10 +286,12 @@ class="wp-lightbox-overlay zoom"
data-wp-interactive="core/image"
data-wp-context='{}'
data-wp-bind--role="state.roleAttribute"
data-wp-bind--aria-label="state.ariaLabel"
data-wp-bind--aria-modal="state.ariaModal"
data-wp-class--active="state.overlayEnabled"
data-wp-class--show-closing-animation="state.showClosingAnimation"
data-wp-watch="callbacks.setOverlayFocus"
data-wp-watch--focus="callbacks.setOverlayFocus"
data-wp-watch--inert="callbacks.setInertElements"
data-wp-on--keydown="actions.handleKeydown"
data-wp-on-async--touchstart="actions.handleTouchStart"
data-wp-on--touchmove="actions.handleTouchMove"
Expand All @@ -304,16 +312,16 @@ class="wp-lightbox-overlay zoom"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg>
</button>
<div class="lightbox-image-container">
<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.currentImage.currentSrc">
<figure data-wp-bind--class="state.selectedImage.figureClassNames" data-wp-bind--style="state.figureStyles">
<img data-wp-bind--alt="state.selectedImage.alt" data-wp-bind--class="state.selectedImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.selectedImage.currentSrc">
</figure>
</div>
<div class="lightbox-image-container">
<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
<figure data-wp-bind--class="state.selectedImage.figureClassNames" data-wp-bind--style="state.figureStyles">
<img data-wp-bind--alt="state.selectedImage.alt" data-wp-bind--class="state.selectedImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
</figure>
</div>
<div data-wp-watch="callbacks.setScreenReaderText" aria-live="polite" aria-atomic="true" class="lightbox-speak screen-reader-text"></div>
<div data-wp-text="state.ariaLabel" aria-live="polite" aria-atomic="true" class="lightbox-speak screen-reader-text"></div>
<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
</div>
HTML;
Expand Down
Loading

0 comments on commit fd51250

Please sign in to comment.