Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Image block: Add animation toggle to lightbox behavior #51357

Merged
merged 16 commits into from
Jun 15, 2023
Merged

Image block: Add animation toggle to lightbox behavior #51357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6f9e6e5
Remove reset button in behaviors, use dropdown option instead
cbravobernal Jun 13, 2023
4f10014
Use default option reading from the theme, prevent autoupdate
cbravobernal Jun 14, 2023
67e4909
Add zoom animation UI and styles
artemiomorales Jun 8, 2023
7b19ee7
Add logic to use original image and scale its dimensions
artemiomorales Jun 9, 2023
fb810fb
Remove extraneous help text
artemiomorales Jun 9, 2023
4e3c571
Manually center lightbox image to improve animation performance
artemiomorales Jun 14, 2023
a49c47c
Move and reenable class declaration for overflow
artemiomorales Jun 14, 2023
198f723
Add prefers reduced motion accessibility styles
artemiomorales Jun 14, 2023
9b471d3
Modify fade styles to prevent image flashing
artemiomorales Jun 14, 2023
2325293
Simplify code for lightbox UI
artemiomorales Jun 14, 2023
335fcbc
Fix PHP error and linter syntax
artemiomorales Jun 14, 2023
9c62703
Clean up code; fix bug, add comments
artemiomorales Jun 14, 2023
3c44266
Fix bug wherein newly placed images were not setting lightbox animation
artemiomorales Jun 14, 2023
f557f74
Fix bug wherein vertical images were stretched on mobile
artemiomorales Jun 14, 2023
c9358f8
Update e2e tests
cbravobernal Jun 15, 2023
7fc4425
Update e2e tests, fix selector showing when it should not
cbravobernal Jun 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 25 additions & 13 deletions lib/block-supports/behaviors.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,18 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
$link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none';
// Get the lightbox setting from the block attributes.
if ( isset( $block['attrs']['behaviors']['lightbox'] ) ) {
$lightbox = $block['attrs']['behaviors']['lightbox'];
$lightbox_settings = $block['attrs']['behaviors']['lightbox'];
// If the lightbox setting is not set in the block attributes, get it from the theme.json file.
} else {
$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data();
if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) {
$lightbox = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'];
$lightbox_settings = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'];
} else {
$lightbox = false;
$lightbox_settings = null;
}
}

if ( ! $lightbox || 'none' !== $link_destination || empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) ) {
if ( ! $lightbox_settings || 'none' !== $link_destination || empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) ) {
return $block_content;
}

Expand All @@ -75,11 +75,28 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
}
$content = $processor->get_updated_html();

$lightbox_animation = '';
if ( isset( $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' );
if ( isset( $block['attrs']['id'] ) ) {
$img_src = wp_get_attachment_url( $block['attrs']['id'] );
} else {
$img_src = $z->get_attribute( 'src' );
}

$w = new WP_HTML_Tag_Processor( $content );
$w->next_tag( 'figure' );
$w->add_class( 'wp-lightbox-container' );
$w->set_attribute( 'data-wp-interactive', true );
$w->set_attribute( 'data-wp-context', '{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }' );
$w->set_attribute(
'data-wp-context',
sprintf( '{ "core":{ "image": { "initialized": false, "imageSrc": "%s", "lightboxEnabled": false, "lightboxAnimation": "%s", "hideAnimationEnabled": false } } }', $img_src, $lightbox_animation )
);
$body_content = $w->get_updated_html();

// Wrap the image in the body content with a button.
Expand All @@ -91,15 +108,9 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
'</div>';
$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );

// Add directive to expand modal image if appropriate.
// Add src to the modal image.
$m = new WP_HTML_Tag_Processor( $content );
$m->next_tag( 'img' );
if ( isset( $block['attrs']['id'] ) ) {
$img_src = wp_get_attachment_url( $block['attrs']['id'] );
} else {
$img_src = $m->get_attribute( 'src' );
}
$m->set_attribute( 'data-wp-context', '{ "core": { "image": { "imageSrc": "' . $img_src . '"} } }' );
$m->set_attribute( 'data-wp-bind--src', 'selectors.core.image.imageSrc' );
$modal_content = $m->get_updated_html();

Expand All @@ -111,11 +122,12 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
$close_button_label = esc_attr__( 'Close', 'gutenberg' );

$lightbox_html = <<<HTML
<div data-wp-body="" class="wp-lightbox-overlay"
<div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
data-wp-bind--role="selectors.core.image.roleAttribute"
aria-label="$dialog_label"
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"
data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
data-wp-effect="effects.core.image.initLightbox"
Expand Down
5 changes: 4 additions & 1 deletion lib/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
"behaviors": {
"blocks": {
"core/image": {
"lightbox": false
"lightbox": {
"enabled": false,
"animation": ""
}
}
}
},
Expand Down
121 changes: 82 additions & 39 deletions packages/block-editor/src/hooks/behaviors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import {
SelectControl,
Button,
__experimentalHStack as HStack,
} from '@wordpress/components';
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { hasBlockSupport } from '@wordpress/blocks';
import { createHigherOrderComponent } from '@wordpress/compose';
Expand All @@ -18,15 +14,11 @@ import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '../store';
import { InspectorControls } from '../components';

/**
* External dependencies
*/
import merge from 'deepmerge';

function BehaviorsControl( {
blockName,
blockBehaviors,
onChange,
onChangeBehavior,
onChangeAnimation,
disabled = false,
} ) {
const { settings, themeBehaviors } = useSelect(
Expand All @@ -43,36 +35,56 @@ function BehaviorsControl( {
[ blockName ]
);

const noBehaviorsOption = {
value: '',
label: __( 'No behaviors' ),
const defaultBehaviors = {
default: {
value: 'default',
label: __( 'Default' ),
},
noBehaviors: {
value: '',
label: __( 'No behaviors' ),
},
};

const behaviorsOptions = Object.entries( settings )
.filter(
( [ behaviorName, behaviorValue ] ) =>
hasBlockSupport( blockName, 'behaviors.' + behaviorName ) &&
hasBlockSupport( blockName, `behaviors.${ behaviorName }` ) &&
behaviorValue
) // Filter out behaviors that are disabled.
.map( ( [ behaviorName ] ) => ( {
value: behaviorName,
label:
// Capitalize the first letter of the behavior name.
behaviorName[ 0 ].toUpperCase() +
behaviorName.slice( 1 ).toLowerCase(),
// Capitalize the first letter of the behavior name.
label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
.slice( 1 )
.toLowerCase() }`,
} ) );

// If every behavior is disabled, do not show the behaviors inspector control.
if ( behaviorsOptions.length === 0 ) return null;

const options = [ noBehaviorsOption, ...behaviorsOptions ];
const options = [
...Object.values( defaultBehaviors ),
...behaviorsOptions,
];

// If every behavior is disabled, do not show the behaviors inspector control.
if ( behaviorsOptions.length === 0 ) {
return null;
}
// Block behaviors take precedence over theme behaviors.
const behaviors = merge( themeBehaviors, blockBehaviors || {} );
const behaviors = { ...themeBehaviors, ...( blockBehaviors || {} ) };

const helpText = disabled
? __( 'The lightbox behavior is disabled for linked images.' )
: __( 'Add behaviors.' );
: '';

const value = () => {
if ( blockBehaviors === undefined ) {
return 'default';
}
if ( behaviors?.lightbox.enabled ) {
return 'lightbox';
}
return '';
};

return (
<InspectorControls group="advanced">
Expand All @@ -81,24 +93,37 @@ function BehaviorsControl( {
<SelectControl
label={ __( 'Behaviors' ) }
// At the moment we are only supporting one behavior (Lightbox)
value={ behaviors?.lightbox ? 'lightbox' : '' }
value={ value() }
options={ options }
onChange={ onChange }
onChange={ onChangeBehavior }
hideCancelButton={ true }
help={ helpText }
size="__unstable-large"
disabled={ disabled }
/>
{ behaviors?.lightbox.enabled && (
<SelectControl
label={ __( 'Animation' ) }
// At the moment we are only supporting one behavior (Lightbox)
value={
behaviors?.lightbox.animation
? behaviors?.lightbox.animation
: ''
}
options={ [
{
value: 'zoom',
label: __( 'Zoom' ),
},
{ value: 'fade', label: 'Fade' },
] }
onChange={ onChangeAnimation }
hideCancelButton={ false }
size="__unstable-large"
disabled={ disabled }
/>
) }
</div>
<HStack justify="flex-end">
<Button
isSmall
disabled={ disabled }
onClick={ () => onChange( undefined ) }
>
{ __( 'Reset' ) }
</Button>
</HStack>
</InspectorControls>
);
}
Expand Down Expand Up @@ -129,8 +154,8 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
<BehaviorsControl
blockName={ props.name }
blockBehaviors={ props.attributes.behaviors }
onChange={ ( nextValue ) => {
if ( nextValue === undefined ) {
onChangeBehavior={ ( nextValue ) => {
if ( nextValue === 'default' ) {
props.setAttributes( {
behaviors: undefined,
} );
Expand All @@ -139,11 +164,29 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
// change the default value (true) so we save it in the attributes.
props.setAttributes( {
behaviors: {
lightbox: nextValue === 'lightbox',
lightbox: {
enabled: nextValue === 'lightbox',
animation:
nextValue === 'lightbox'
? 'zoom'
: '',
},
},
} );
}
} }
onChangeAnimation={ ( nextValue ) => {
props.setAttributes( {
behaviors: {
lightbox: {
enabled:
props.attributes.behaviors.lightbox
.enabled,
animation: nextValue,
},
},
} );
} }
disabled={ blockHasLink }
/>
</>
Expand Down
Loading