From e613a5b800ad91b6a0949c2272fadd3ba8e1d247 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 30 Aug 2023 12:41:52 -0400 Subject: [PATCH 01/64] Add initial implementation of image settings panel --- .../src/components/global-styles/hooks.js | 1 + .../global-styles/image-settings-panel.js | 81 +++++++++++++++++++ .../src/components/global-styles/index.js | 4 + .../components/global-styles/screen-block.js | 19 +++++ 4 files changed, 105 insertions(+) create mode 100644 packages/block-editor/src/components/global-styles/image-settings-panel.js diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 7d81e0d4d224da..6bf701bd8f32b2 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -50,6 +50,7 @@ const VALID_SETTINGS = [ 'layout.contentSize', 'layout.definitions', 'layout.wideSize', + 'lightbox.enabled', 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js new file mode 100644 index 00000000000000..ee8895ad444650 --- /dev/null +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -0,0 +1,81 @@ +/** + * WordPress dependencies + */ +import { + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, + ToggleControl, +} from '@wordpress/components'; +import { __, _x } from '@wordpress/i18n'; + +export function useHasImageSettingsPanel( name ) { + return name === 'core/image'; +} + +function ImageToolsPanel( { + resetAllSettings, + onChange, + settings, + panelId, + children, +} ) { + const resetAll = () => { + const updatedValue = resetAllSettings( settings ); + onChange( updatedValue ); + }; + + return ( + + { children } + + ); +} + +export default function ImageSettingsPanel( { + as: Wrapper = ImageToolsPanel, + name, + onChange, + settings, + panelId, +} ) { + const hasImageSettingsPanel = useHasImageSettingsPanel( name ); + + return ( + <> + { + onChange( false ); + } } + settings={ settings } + onChange={ onChange } + panelId={ panelId } + > + { hasImageSettingsPanel && ( + true } + label={ __( 'Expand on Click' ) } + onDeselect={ () => onChange( false ) } + isShownByDefault={ true } + panelId={ panelId } + > + { + onChange( newValue ); + } } + /> + + ) } + + + ); +} diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js index 24bab543b9ada6..76a95357ba52b4 100644 --- a/packages/block-editor/src/components/global-styles/index.js +++ b/packages/block-editor/src/components/global-styles/index.js @@ -23,5 +23,9 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel'; export { default as ColorPanel, useHasColorPanel } from './color-panel'; export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel'; export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel'; +export { + default as ImageSettingsPanel, + useHasImageSettingsPanel, +} from './image-settings-panel'; export { default as AdvancedPanel } from './advanced-panel'; export { areGlobalStyleConfigsEqual } from './utils'; diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index b24fd5eb41de15..e723836c38265d 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -66,6 +66,7 @@ const { useHasColorPanel, useHasEffectsPanel, useHasFiltersPanel, + useHasImageSettingsPanel, useGlobalStyle, BorderPanel: StylesBorderPanel, ColorPanel: StylesColorPanel, @@ -73,6 +74,7 @@ const { DimensionsPanel: StylesDimensionsPanel, EffectsPanel: StylesEffectsPanel, FiltersPanel: StylesFiltersPanel, + ImageSettingsPanel, AdvancedPanel: StylesAdvancedPanel, } = unlock( blockEditorPrivateApis ); @@ -99,6 +101,7 @@ function ScreenBlock( { name, variation } ) { const hasDimensionsPanel = useHasDimensionsPanel( settings ); const hasEffectsPanel = useHasEffectsPanel( settings ); const hasFiltersPanel = useHasFiltersPanel( settings ); + const hasImageSettingsPanel = useHasImageSettingsPanel( name ); const hasVariationsPanel = !! blockVariations?.length && ! variation; const { canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = @@ -144,6 +147,14 @@ function ScreenBlock( { name, variation } ) { } ); } }; + const onChangeLightbox = ( newSetting ) => { + setSettings( { + ...rawSettings, + lightbox: { + enabled: newSetting, + }, + } ); + }; const onChangeBorders = ( newStyle ) => { if ( ! newStyle?.border ) { setStyle( newStyle ); @@ -251,6 +262,14 @@ function ScreenBlock( { name, variation } ) { includeLayoutControls /> ) } + { hasImageSettingsPanel && ( + + ) } + { canEditCSS && (

From b0fb3b5486ae978cf5b8f944ff289016a54d45b0 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 30 Aug 2023 15:19:43 -0400 Subject: [PATCH 02/64] Remove unnecessary code and fix reset functionality --- .../global-styles/image-settings-panel.js | 55 ++++++------------- 1 file changed, 17 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index ee8895ad444650..930788808fcaef 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -12,31 +12,7 @@ export function useHasImageSettingsPanel( name ) { return name === 'core/image'; } -function ImageToolsPanel( { - resetAllSettings, - onChange, - settings, - panelId, - children, -} ) { - const resetAll = () => { - const updatedValue = resetAllSettings( settings ); - onChange( updatedValue ); - }; - - return ( - - { children } - - ); -} - export default function ImageSettingsPanel( { - as: Wrapper = ImageToolsPanel, name, onChange, settings, @@ -44,38 +20,41 @@ export default function ImageSettingsPanel( { } ) { const hasImageSettingsPanel = useHasImageSettingsPanel( name ); + const resetLightbox = () => { + onChange( false ); + }; + + const decodeValue = () => { + return settings.lightbox ? settings.lightbox.enabled : false; + }; + + const lightbox = decodeValue(); + return ( <> - { - onChange( false ); - } } - settings={ settings } - onChange={ onChange } + { hasImageSettingsPanel && ( true } + hasValue={ () => !! lightbox } label={ __( 'Expand on Click' ) } - onDeselect={ () => onChange( false ) } + onDeselect={ resetLightbox } isShownByDefault={ true } panelId={ panelId } > { onChange( newValue ); } } /> ) } - + ); } From b76d56cc14a938c08dee1e9757004f7ead56675b Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 30 Aug 2023 17:14:44 -0400 Subject: [PATCH 03/64] Add UI to image block inspector --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/image/block.json | 7 +++++++ packages/block-library/src/image/image.js | 19 +++++++++++++++++++ packages/block-library/src/image/index.php | 13 +++++++++++-- 4 files changed, 38 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index de0ae39604ff5c..8bfd769f992152 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -340,7 +340,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre - **Name:** core/image - **Category:** media - **Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone) -- **Attributes:** align, alt, aspectRatio, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width +- **Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width ## Latest Comments diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index a360e595281267..0bf238b0f51981 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -33,6 +33,13 @@ "selector": "figcaption", "__experimentalRole": "content" }, + "lightbox": { + "type": "object", + "enabled": { + "type": "boolean", + "default": false + } + }, "title": { "type": "string", "source": "attribute", diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 9bb2541cc7af20..1567ec59527145 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -7,6 +7,7 @@ import { ResizableBox, Spinner, TextareaControl, + ToggleControl, TextControl, ToolbarButton, ToolbarGroup, @@ -113,6 +114,7 @@ export default function Image( { scale, linkTarget, sizeSlug, + lightbox, } = attributes; // The only supported unit is px, so we can parseInt to strip the px here. @@ -451,6 +453,7 @@ export default function Image( { height: undefined, scale: undefined, aspectRatio: undefined, + lightbox: undefined, } ) } > @@ -519,6 +522,22 @@ export default function Image( { onChange={ updateImage } options={ imageSizeOptions } /> + lightbox !== undefined } + label={ __( 'Expand on Click' ) } + onDeselect={ () => { + setAttributes( { lightbox: undefined } ); + } } + isShownByDefault={ true } + > + { + setAttributes( { lightbox: newValue } ); + } } + /> + diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 1eb287390dc615..4fa111444aaad0 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -36,8 +36,17 @@ function render_block_core_image( $attributes, $content, $block ) { // Get the lightbox setting from the block attributes. // TODO: This must be changed to use the new Lightbox UI. - if ( isset( $attributes['behaviors']['lightbox'] ) ) { - $lightbox_settings = $attributes['behaviors']['lightbox']; + if ( isset( $attributes['lightbox'] ) ) { + $lightbox_settings = $attributes['lightbox']; + } else { + // THIS IS NOT WORKING YET AND IS PROBABLY INCORRECT + $theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data(); + $user_data = WP_Theme_JSON_Resolver_Gutenberg::get_user_data()->get_data(); + if ( isset( $user_data['settings']['lightbox'] ) ) { + $lightbox_settings = $theme_data['settings']['lightbox']; + } else { + $lightbox_settings = null; + } } // If the lightbox is enabled, the image is not linked, and the Interactivity API is enabled, load the view script. From 1872f7746b7e7323ad3c90edffc029030a880d63 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 31 Aug 2023 13:24:09 +0100 Subject: [PATCH 04/64] Add `lightbox` to the valid `theme.json` settings --- lib/class-wp-theme-json-gutenberg.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 7ba9d61f5779ed..24744eb46da954 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -383,6 +383,9 @@ class WP_Theme_JSON_Gutenberg { 'wideSize' => null, 'allowEditing' => null, ), + 'lightbox' => array( + 'enabled' => null, + ), 'position' => array( 'fixed' => null, 'sticky' => null, From d2818afc16d43e8fc408af54541bc6036b60624c Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 31 Aug 2023 18:15:14 +0100 Subject: [PATCH 05/64] Fix a bug with image selector and integrate with global styles --- packages/block-library/src/image/image.js | 6 ++++-- packages/block-library/src/image/index.php | 11 ++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 1567ec59527145..5f477732836210 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -532,9 +532,11 @@ export default function Image( { > { - setAttributes( { lightbox: newValue } ); + setAttributes( { + lightbox: { enabled: newValue }, + } ); } } /> diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 3282feffac5fe0..6735d7f22ed333 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -35,12 +35,12 @@ function render_block_core_image( $attributes, $content, $block ) { $link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none'; // Get the lightbox setting from the block attributes. - if ( isset( $block['attrs']['lightbox'] ) ) { - $lightbox_settings = $block['attrs']['lightbox']; + if ( isset( $attributes['lightbox'] ) ) { + $lightbox_settings = $attributes['lightbox']; // If the lightbox setting is not set in the block attributes, get it from // the global settings. } else { - $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); + $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); } // If the lightbox is enabled, the image is not linked, and the Interactivity API is enabled, load the view script. @@ -82,6 +82,11 @@ function block_core_image_render_lightbox( $block_content, $block ) { // Get the lightbox setting from the block attributes. if ( isset( $block['attrs']['lightbox'] ) ) { $lightbox_settings = $block['attrs']['lightbox']; + // If the lightbox setting is not set in the block attributes, get it from + // the global settings. + + } else { + $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); } if ( ! isset( $lightbox_settings ) || 'none' !== $link_destination ) { From a32d0f6eb00c05bf6d100be811d64d413a3ad083 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Sat, 2 Sep 2023 19:56:32 +0100 Subject: [PATCH 06/64] Update `theme.json` schema --- schemas/json/theme.json | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 4d9abef7571d64..e8e4623dfba20c 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -662,6 +662,16 @@ } } }, + "settingsPropertiesLightbox": { + "type": "object", + "properties": { + "enabled": { + "description": "Defines whether the lightbox is enabled or not.", + "type": "boolean", + "additionalProperties": false + } + } + }, "settingsProperties": { "allOf": [ { "$ref": "#/definitions/settingsPropertiesAppearanceTools" }, @@ -673,7 +683,8 @@ { "$ref": "#/definitions/settingsPropertiesPosition" }, { "$ref": "#/definitions/settingsPropertiesSpacing" }, { "$ref": "#/definitions/settingsPropertiesTypography" }, - { "$ref": "#/definitions/settingsPropertiesCustom" } + { "$ref": "#/definitions/settingsPropertiesCustom" }, + { "$ref": "#/definitions/settingsPropertiesLightbox" } ] }, "settingsPropertiesComplete": { @@ -693,7 +704,8 @@ "shadow": {}, "spacing": {}, "typography": {}, - "custom": {} + "custom": {}, + "lightbox": {} }, "additionalProperties": false } @@ -2164,6 +2176,7 @@ "position": {}, "dimensions": {}, "custom": {}, + "lightbox": {}, "blocks": { "description": "Settings defined on a per-block basis.", "$ref": "#/definitions/settingsBlocksPropertiesComplete" From e67634ee918fb9e1d61f769d703322499ea8c033 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Sat, 2 Sep 2023 19:58:07 +0100 Subject: [PATCH 07/64] Added the `@since`annotation --- lib/class-wp-theme-json-gutenberg.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 24744eb46da954..28b02448acca3d 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -346,6 +346,7 @@ class WP_Theme_JSON_Gutenberg { * `position.fixed` and `position.sticky`. * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`. * @since 6.4.0 Added `layout.allowEditing`. + * @since 6.4.0 Added `lightbox.enabled`. * @var array */ const VALID_SETTINGS = array( From 3ddb1b1f08b04f0060466ed4d01467c9524b0646 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 4 Sep 2023 12:50:57 +0100 Subject: [PATCH 08/64] Refactor image settings panel and screen block Simplified the ImageSettingsPanel and ScreenBlock components. More specific changes: - Removed `name` and `settings` from the ImageSettingsPanel - Use `userSettings` instead of `settings` in the ImageSettingsPanel - Modified `onChangeLightbox` logic, it now takes a new setting instead of a boolean and directly passes to `onChange` - Updated the ScreenBlock component to account for this refactor --- .../theme-json-reference/theme-json-living.md | 7 +++ .../global-styles/image-settings-panel.js | 43 ++++++++----------- .../components/global-styles/screen-block.js | 8 ++-- 3 files changed, 28 insertions(+), 30 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 5c3dd9d1c57874..e86d57015e12d8 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -172,6 +172,13 @@ Settings related to typography. Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name. +--- + +### enabled + +Defines whether the lightbox is enabled or not. + + --- ## Styles diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 930788808fcaef..51c0c0baedab87 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -13,23 +13,20 @@ export function useHasImageSettingsPanel( name ) { } export default function ImageSettingsPanel( { - name, onChange, - settings, + userSettings, panelId, } ) { - const hasImageSettingsPanel = useHasImageSettingsPanel( name ); - const resetLightbox = () => { - onChange( false ); + onChange( undefined ); }; - const decodeValue = () => { - return settings.lightbox ? settings.lightbox.enabled : false; + const onChangeLightbox = ( newSetting ) => { + onChange( { + enabled: newSetting, + } ); }; - const lightbox = decodeValue(); - return ( <> - { hasImageSettingsPanel && ( - !! lightbox } + !! userSettings?.lightbox } + label={ __( 'Expand on Click' ) } + onDeselect={ resetLightbox } + isShownByDefault={ true } + panelId={ panelId } + > + - { - onChange( newValue ); - } } - /> - - ) } + checked={ !! userSettings?.lightbox?.enabled } + onChange={ onChangeLightbox } + /> + ); diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index e723836c38265d..0d5881270575b6 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -92,6 +92,7 @@ function ScreenBlock( { name, variation } ) { shouldDecodeEncode: false, } ); const [ rawSettings, setSettings ] = useGlobalSetting( '', name ); + const [ userSettings ] = useGlobalSetting( '', name, 'user' ); const settings = useSettingsForBlockElement( rawSettings, name ); const blockType = getBlockType( name ); const blockVariations = useBlockVariations( name ); @@ -150,9 +151,7 @@ function ScreenBlock( { name, variation } ) { const onChangeLightbox = ( newSetting ) => { setSettings( { ...rawSettings, - lightbox: { - enabled: newSetting, - }, + lightbox: newSetting, } ); }; const onChangeBorders = ( newStyle ) => { @@ -264,9 +263,8 @@ function ScreenBlock( { name, variation } ) { ) } { hasImageSettingsPanel && ( ) } From fae6f9964a91b97f706e869b2e3fd77b91f6ea0b Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 4 Sep 2023 18:25:40 +0100 Subject: [PATCH 09/64] Add showUI option to lightbox settings A new option has been added to the lightbox settings in the Theme JSON reference guide and Gutenberg class. This `showUI` option allows users to toggle whether the Lightbox UI is displayed in the block editor or not. Also, updated the JSON schema accordingly to reflect these changes in theme.json files. --- .../theme-json-reference/theme-json-living.md | 7 +++++++ lib/class-wp-theme-json-gutenberg.php | 3 ++- .../block-editor/src/components/global-styles/hooks.js | 1 + .../src/components/global-styles/image-settings-panel.js | 7 +++++-- .../edit-site/src/components/global-styles/screen-block.js | 2 +- schemas/json/theme.json | 5 +++++ 6 files changed, 21 insertions(+), 4 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index e86d57015e12d8..ed77f3d5b6af6c 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -179,6 +179,13 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested- Defines whether the lightbox is enabled or not. +--- + +### showUI + +Defines whether to show the Lightbox UI in the block editor + + --- ## Styles diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 28b02448acca3d..5cbf687a03a9e3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -346,7 +346,7 @@ class WP_Theme_JSON_Gutenberg { * `position.fixed` and `position.sticky`. * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`. * @since 6.4.0 Added `layout.allowEditing`. - * @since 6.4.0 Added `lightbox.enabled`. + * @since 6.4.0 Added `lightbox.enabled` and `lightbox.showUI`. * @var array */ const VALID_SETTINGS = array( @@ -386,6 +386,7 @@ class WP_Theme_JSON_Gutenberg { ), 'lightbox' => array( 'enabled' => null, + 'showUI' => null, ), 'position' => array( 'fixed' => null, diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 6bf701bd8f32b2..9917a748ced171 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -51,6 +51,7 @@ const VALID_SETTINGS = [ 'layout.definitions', 'layout.wideSize', 'lightbox.enabled', + 'lightbox.showUI', 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 51c0c0baedab87..312896b8a755a7 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -8,8 +8,8 @@ import { } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; -export function useHasImageSettingsPanel( name ) { - return name === 'core/image'; +export function useHasImageSettingsPanel( name, settings ) { + return name === 'core/image' && settings?.lightbox?.showUI; } export default function ImageSettingsPanel( { @@ -43,6 +43,9 @@ export default function ImageSettingsPanel( { > diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 0d5881270575b6..665073f96d9ef8 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -102,7 +102,7 @@ function ScreenBlock( { name, variation } ) { const hasDimensionsPanel = useHasDimensionsPanel( settings ); const hasEffectsPanel = useHasEffectsPanel( settings ); const hasFiltersPanel = useHasFiltersPanel( settings ); - const hasImageSettingsPanel = useHasImageSettingsPanel( name ); + const hasImageSettingsPanel = useHasImageSettingsPanel( name, settings ); const hasVariationsPanel = !! blockVariations?.length && ! variation; const { canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = diff --git a/schemas/json/theme.json b/schemas/json/theme.json index e8e4623dfba20c..35ee918d143809 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -669,6 +669,11 @@ "description": "Defines whether the lightbox is enabled or not.", "type": "boolean", "additionalProperties": false + }, + "showUI": { + "description": "Defines whether to show the Lightbox UI in the block editor", + "type": "boolean", + "additionalProperties": false } } }, From df9f857f534c9adcbf0b28935924572e38b7f721 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 4 Sep 2023 18:35:53 +0100 Subject: [PATCH 10/64] Add defaults for the `lightbox` to the GB `theme.json` --- lib/theme.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/theme.json b/lib/theme.json index 91990215470b91..5c0ca0794d65db 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -273,6 +273,12 @@ "radius": true } }, + "core/image": { + "lightbox": { + "enabled": false, + "showUI": true + } + }, "core/pullquote": { "border": { "color": true, From df3f1c61e547bb00627888d4d443ec42bbdc947d Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 4 Sep 2023 19:55:14 +0100 Subject: [PATCH 11/64] Change the falsy checks in image.js --- packages/block-library/src/image/image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 5f477732836210..b8b1938d30bce3 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -523,7 +523,7 @@ export default function Image( { options={ imageSizeOptions } /> lightbox !== undefined } + hasValue={ () => !! lightbox } label={ __( 'Expand on Click' ) } onDeselect={ () => { setAttributes( { lightbox: undefined } ); @@ -532,7 +532,7 @@ export default function Image( { > { setAttributes( { lightbox: { enabled: newValue }, From 075535b7c307304d34fe30c647f36653510c3997 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 5 Sep 2023 00:40:22 -0400 Subject: [PATCH 12/64] Add filters; add legacy support for behaviors syntax I moved the logic to determine whether the lightbox should display or not to two render_block_data filters. One of these filters is inside of the index.php so that itc can exist in WP core, the other inside of blocks.php in order to offer legacy support for the Behaviors syntax in the Gutenberg plugin. Using the render_block_data instead of render_block allows us to store a 'lightboxEnabled' value on the block, which we can use to determine whether the lightbox should be rendered in these two separate locations relatively cleanly without needing to touch the markup. I added behaviors back to the valid top-level keys so that we can read it to offer legacy support. Lastly, I set the lightbox.enabled attribute to NULL by default so that we can determine whether the Behaviors syntax should override it or not. --- lib/blocks.php | 43 ++++++++++++++ lib/class-wp-theme-json-gutenberg.php | 2 + lib/theme.json | 2 +- packages/block-library/src/image/index.php | 69 +++++++++++----------- 4 files changed, 80 insertions(+), 36 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index f160d2a7080d3d..f12824b08de1f2 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -433,4 +433,47 @@ function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $si return $value; } + add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 ); + +function should_render_lightbox_gutenberg( $block ) { + + if( 'core/image' !== $block['blockName'] ) { + return $block; + } + + // Get the lightbox setting from the block attributes. + if ( isset( $block['attrs']['lightbox'] ) ) { + $lightbox_settings = $block['attrs']['lightbox']; + // If not present, check legacy syntax + } else if( isset( $block['attrs']['behaviors']['lightbox'] ) ) { + $lightbox_settings = $block['attrs']['behaviors']['lightbox']; + } + + // If not present in block attributes, check global settings + if(!isset($lightbox_settings)) { + $lightbox_settings = gutenberg_get_global_settings( array('lightbox'), array( 'block_name' => 'core/image' ) ); + } + + // If not present in global settings, check legacy syntax + if(!isset($lightbox_settings) || is_null($lightbox_settings['enabled']) ) { + $theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data(); + if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) { + $lightbox_settings = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox']; + } + } + + $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; + + // If the lightbox is enabled, the image is not linked, flag the lightbox to be rendered + if ( isset($lightbox_settings) && + true === $lightbox_settings['enabled'] && + 'none' === $link_destination + ) { + $block['lightboxEnabled'] = true; + } + + return $block; +} + +add_filter( 'render_block_data', 'should_render_lightbox_gutenberg', 15, 1 ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 5cbf687a03a9e3..d57b408946d74e 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -331,6 +331,7 @@ class WP_Theme_JSON_Gutenberg { 'templateParts', 'title', 'version', + 'behaviors', ); /** @@ -420,6 +421,7 @@ class WP_Theme_JSON_Gutenberg { 'textTransform' => null, 'writingMode' => null, ), + 'behaviors' => null, ); /** diff --git a/lib/theme.json b/lib/theme.json index 5c0ca0794d65db..977ebeabb368e5 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -275,7 +275,7 @@ }, "core/image": { "lightbox": { - "enabled": false, + "enabled": null, "showUI": true } }, diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 6735d7f22ed333..1d777d23fe7029 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -32,22 +32,8 @@ function render_block_core_image( $attributes, $content, $block ) { } $should_load_view_script = false; - $link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none'; - // Get the lightbox setting from the block attributes. - if ( isset( $attributes['lightbox'] ) ) { - $lightbox_settings = $attributes['lightbox']; - // If the lightbox setting is not set in the block attributes, get it from - // the global settings. - } else { - $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); - } - - // If the lightbox is enabled, the image is not linked, and the Interactivity API is enabled, load the view script. - if ( isset( $lightbox_settings['enabled'] ) && - true === $lightbox_settings['enabled'] && - 'none' === $link_destination - ) { + if ( isset( $block->parsed_block['lightboxEnabled'] ) ) { $should_load_view_script = true; } @@ -69,15 +55,11 @@ function render_block_core_image( $attributes, $content, $block ) { } -/** - * Add the directives and layout needed for the lightbox behavior. - * - * @param string $block_content Rendered block content. - * @param array $block Block object. - * @return string Filtered block content. - */ -function block_core_image_render_lightbox( $block_content, $block ) { - $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; +function should_render_lightbox_core( $block ) { + + if( 'core/image' !== $block['blockName'] ) { + return $block; + } // Get the lightbox setting from the block attributes. if ( isset( $block['attrs']['lightbox'] ) ) { @@ -86,14 +68,34 @@ function block_core_image_render_lightbox( $block_content, $block ) { // the global settings. } else { - $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); + $lightbox_settings = gutenberg_get_global_settings( array('lightbox'), array( 'block_name' => 'core/image' ) ); } - if ( ! isset( $lightbox_settings ) || 'none' !== $link_destination ) { - return $block_content; + $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; + + // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered + if ( isset( $lightbox_settings ) && + true === $lightbox_settings['enabled'] && + 'none' === $link_destination + ) { + $block['lightboxEnabled'] = true; } - if ( isset( $lightbox_settings['enabled'] ) && false === $lightbox_settings['enabled'] ) { + return $block; +} +add_filter( 'render_block_data', 'should_render_lightbox_core', 10, 1 ); + + +/** + * Add the directives and layout needed for the lightbox behavior. + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function block_core_image_render_lightbox( $block_content, $block ) { + + if ( ! isset( $block['lightboxEnabled'] ) || false === $block['lightboxEnabled'] ) { return $block_content; } @@ -262,16 +264,13 @@ function block_core_image_render_lightbox( $block_content, $block ) { return str_replace( '', $lightbox_html . '', $body_content ); } -// TODO: We should not be adding a separate filter but rather move the -// the lightbox rendering to the `render_block_core_image` function. - // Use priority 15 to run this hook after other hooks/plugins. // They could use the `render_block_{$this->name}` filter to modify the markup. add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 ); - /** - * Registers the `core/image` block on server. - */ +/** + * Registers the `core/image` block on server. + */ function register_block_core_image() { register_block_type_from_metadata( __DIR__ . '/image', @@ -280,4 +279,4 @@ function register_block_core_image() { ) ); } - add_action( 'init', 'register_block_core_image' ); +add_action( 'init', 'register_block_core_image' ); From c2a0b3fdcc8f0d7ad02f371b45953035f6ad82e5 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 5 Sep 2023 14:24:24 +0100 Subject: [PATCH 13/64] Fix linter errors & add more expansive comments. --- lib/blocks.php | 41 +++++++++++++++------- packages/block-library/src/image/index.php | 22 +++++++----- 2 files changed, 42 insertions(+), 21 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index f12824b08de1f2..c8e3fa83dbaa66 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -436,37 +436,49 @@ function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $si add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 ); -function should_render_lightbox_gutenberg( $block ) { - if( 'core/image' !== $block['blockName'] ) { +/** + * Check if the lightbox should be rendered for a given block. + * + * This function is INTENTIONALLY left out of core as it only provides + * backwards compatibility for the legacy lightbox syntax that was only + * introduced in Gutenberg. The legacy syntax was using the `behaviors` key in + * the block attrbutes and the `theme.json` file. + * + * @param array $block The block to check. + * @return array The block with the lightboxEnabled flag set if the lightbox should be rendered. + */ +function gutenberg_should_render_lightbox( $block ) { + + if ( 'core/image' !== $block['blockName'] ) { return $block; } // Get the lightbox setting from the block attributes. if ( isset( $block['attrs']['lightbox'] ) ) { $lightbox_settings = $block['attrs']['lightbox']; - // If not present, check legacy syntax - } else if( isset( $block['attrs']['behaviors']['lightbox'] ) ) { + // If not present, check legacy syntax. + } elseif ( isset( $block['attrs']['behaviors']['lightbox'] ) ) { $lightbox_settings = $block['attrs']['behaviors']['lightbox']; } - // If not present in block attributes, check global settings - if(!isset($lightbox_settings)) { - $lightbox_settings = gutenberg_get_global_settings( array('lightbox'), array( 'block_name' => 'core/image' ) ); + // If not present in block attributes, check global settings. + if ( ! isset( $lightbox_settings ) ) { + $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); } - // If not present in global settings, check legacy syntax - if(!isset($lightbox_settings) || is_null($lightbox_settings['enabled']) ) { + // If not present in global settings, check legacy syntax. + if ( ! isset( $lightbox_settings ) || is_null( $lightbox_settings['enabled'] ) ) { $theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data(); - if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) { + if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) { $lightbox_settings = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox']; } } $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; - // If the lightbox is enabled, the image is not linked, flag the lightbox to be rendered - if ( isset($lightbox_settings) && + // If the lightbox is enabled, the image is not linked, flag the lightbox to be rendered. + if ( isset( $lightbox_settings ) && true === $lightbox_settings['enabled'] && 'none' === $link_destination ) { @@ -476,4 +488,7 @@ function should_render_lightbox_gutenberg( $block ) { return $block; } -add_filter( 'render_block_data', 'should_render_lightbox_gutenberg', 15, 1 ); +// Run with a priority of 15 to ensure it runs after +// `block_core_image_should_render_lightbox` core filter (that has a +// priority of 10). +add_filter( 'render_block_data', 'gutenberg_should_render_lightbox', 15, 1 ); diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 1d777d23fe7029..72333d80673b9b 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -33,7 +33,7 @@ function render_block_core_image( $attributes, $content, $block ) { $should_load_view_script = false; - if ( isset( $block->parsed_block['lightboxEnabled'] ) ) { + if ( isset( $block->parsed_block['lightboxEnabled'] ) ) { $should_load_view_script = true; } @@ -54,10 +54,17 @@ function render_block_core_image( $attributes, $content, $block ) { return $processor->get_updated_html(); } +/** + * Add 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. + */ +function block_core_image_should_render_lightbox( $block ) { -function should_render_lightbox_core( $block ) { - - if( 'core/image' !== $block['blockName'] ) { + if ( 'core/image' !== $block['blockName'] ) { return $block; } @@ -66,14 +73,13 @@ function should_render_lightbox_core( $block ) { $lightbox_settings = $block['attrs']['lightbox']; // If the lightbox setting is not set in the block attributes, get it from // the global settings. - } else { - $lightbox_settings = gutenberg_get_global_settings( array('lightbox'), array( 'block_name' => 'core/image' ) ); + $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); } $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; - // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered + // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. if ( isset( $lightbox_settings ) && true === $lightbox_settings['enabled'] && 'none' === $link_destination @@ -83,7 +89,7 @@ function should_render_lightbox_core( $block ) { return $block; } -add_filter( 'render_block_data', 'should_render_lightbox_core', 10, 1 ); +add_filter( 'render_block_data', 'block_core_image_should_render_lightbox', 10, 1 ); /** From 91d130c12fa99fab9533baf69fa3249ce1995b2e Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 5 Sep 2023 16:45:13 +0100 Subject: [PATCH 14/64] If no value is set for the lightbox in the Global Styles, then the block editor UI should inherit the value from `theme.json`. Likewise, if no value is set in the block attributes, the block editor UI should inherit the value from the Global Styles of the Image. --- .../global-styles/image-settings-panel.js | 6 ++--- packages/block-library/src/image/image.js | 16 ++++++++++++- .../components/global-styles/screen-block.js | 24 +++++++++++++++---- 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 312896b8a755a7..15c4286856e911 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -15,6 +15,7 @@ export function useHasImageSettingsPanel( name, settings ) { export default function ImageSettingsPanel( { onChange, userSettings, + settings, panelId, } ) { const resetLightbox = () => { @@ -43,10 +44,7 @@ export default function ImageSettingsPanel( { > diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index b8b1938d30bce3..df4549b0f26658 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -24,6 +24,7 @@ import { __experimentalImageURLInputUI as ImageURLInputUI, MediaReplaceFlow, store as blockEditorStore, + useSetting, BlockAlignmentControl, __experimentalImageEditor as ImageEditor, __experimentalGetElementClassName, @@ -173,6 +174,7 @@ export default function Image( { }, [ clientId ] ); + const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore ); const { createErrorNotice, createSuccessNotice } = useDispatch( noticesStore ); @@ -367,6 +369,18 @@ export default function Image( { availableUnits: [ 'px' ], } ); + const lightboxSetting = useSetting( 'lightbox' ); + + const lightboxChecked = useMemo( () => { + // If the lightbox is set in the block attributes, use that. + if ( lightbox?.enabled ) return true; + + // If the lightbox is NOT set in the block attributes AND it IS enabled in + // the settings, use that. + if ( ! lightbox && lightboxSetting?.enabled ) return true; + return false; + }, [ lightbox, lightboxSetting ] ); + const controls = ( <> @@ -532,7 +546,7 @@ export default function Image( { > { setAttributes( { lightbox: { enabled: newValue }, diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 665073f96d9ef8..4c99dfab02b4c2 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -149,10 +149,25 @@ function ScreenBlock( { name, variation } ) { } }; const onChangeLightbox = ( newSetting ) => { - setSettings( { - ...rawSettings, - lightbox: newSetting, - } ); + // If the newSetting is undefined, this means that the user has deselected + // (reset) the lightbox setting. + if ( newSetting === undefined ) { + setSettings( { + ...rawSettings, + lightbox: undefined, + } ); + + // Otherwise, we simply set the lightbox setting to the new value but + // taking care of not overriding the other lightbox settings. + } else { + setSettings( { + ...rawSettings, + lightbox: { + ...rawSettings.lightbox, + ...newSetting, + }, + } ); + } }; const onChangeBorders = ( newStyle ) => { if ( ! newStyle?.border ) { @@ -265,6 +280,7 @@ function ScreenBlock( { name, variation } ) { ) } From c58612c470b6483447f987239c4f7b193dda1f0a Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 5 Sep 2023 16:53:40 +0100 Subject: [PATCH 15/64] Rename `showUI` to `allowEditing` --- .../theme-json-reference/theme-json-living.md | 4 ++-- lib/class-wp-theme-json-gutenberg.php | 4 ++-- lib/theme.json | 2 +- packages/block-editor/src/components/global-styles/hooks.js | 2 +- .../src/components/global-styles/image-settings-panel.js | 2 +- schemas/json/theme.json | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index ed77f3d5b6af6c..9fdd17565038ea 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -181,9 +181,9 @@ Defines whether the lightbox is enabled or not. --- -### showUI +### allowEditing -Defines whether to show the Lightbox UI in the block editor +Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor. --- diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index d57b408946d74e..d27a8cb2b2c057 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -347,7 +347,7 @@ class WP_Theme_JSON_Gutenberg { * `position.fixed` and `position.sticky`. * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`. * @since 6.4.0 Added `layout.allowEditing`. - * @since 6.4.0 Added `lightbox.enabled` and `lightbox.showUI`. + * @since 6.4.0 Added `lightbox.enabled` and `lightbox.allowEditing`. * @var array */ const VALID_SETTINGS = array( @@ -387,7 +387,7 @@ class WP_Theme_JSON_Gutenberg { ), 'lightbox' => array( 'enabled' => null, - 'showUI' => null, + 'allowEditing' => null, ), 'position' => array( 'fixed' => null, diff --git a/lib/theme.json b/lib/theme.json index 977ebeabb368e5..5cb8f30335024f 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -276,7 +276,7 @@ "core/image": { "lightbox": { "enabled": null, - "showUI": true + "allowEditing": true } }, "core/pullquote": { diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 9917a748ced171..4bbc9c40588e03 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -51,7 +51,7 @@ const VALID_SETTINGS = [ 'layout.definitions', 'layout.wideSize', 'lightbox.enabled', - 'lightbox.showUI', + 'lightbox.allowEditing', 'position.fixed', 'position.sticky', 'spacing.customSpacingSize', diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 15c4286856e911..68f8ead50c5edd 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -9,7 +9,7 @@ import { import { __, _x } from '@wordpress/i18n'; export function useHasImageSettingsPanel( name, settings ) { - return name === 'core/image' && settings?.lightbox?.showUI; + return name === 'core/image' && settings?.lightbox?.allowEditing; } export default function ImageSettingsPanel( { diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 35ee918d143809..f2d1f5987590ae 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -670,8 +670,8 @@ "type": "boolean", "additionalProperties": false }, - "showUI": { - "description": "Defines whether to show the Lightbox UI in the block editor", + "allowEditing": { + "description": "Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor.", "type": "boolean", "additionalProperties": false } From c602139afd2c2f3ea82c4ecf34264cb81db36cf9 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 5 Sep 2023 20:18:01 +0100 Subject: [PATCH 16/64] Fix the `theme.json` schema --- schemas/json/theme.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index f2d1f5987590ae..be9dabd7ac4f12 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -664,16 +664,15 @@ }, "settingsPropertiesLightbox": { "type": "object", + "additionalProperties": false, "properties": { "enabled": { "description": "Defines whether the lightbox is enabled or not.", - "type": "boolean", - "additionalProperties": false + "type": "boolean" }, "allowEditing": { "description": "Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor.", - "type": "boolean", - "additionalProperties": false + "type": "boolean" } } }, From 339a715d5e726ceef61635426f61cb6a50d6dc67 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 5 Sep 2023 21:32:01 +0100 Subject: [PATCH 17/64] Use the globalPath for the settings on the PHP side --- lib/blocks.php | 5 +++++ packages/block-library/src/image/index.php | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/lib/blocks.php b/lib/blocks.php index c8e3fa83dbaa66..2312709677b77c 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -465,6 +465,11 @@ function gutenberg_should_render_lightbox( $block ) { // If not present in block attributes, check global settings. if ( ! isset( $lightbox_settings ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); + + // If not present in global settings, check the top-level global settings. + if ( ! isset( $lightbox_settings['enabled'] ) ) { + $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); + } } // If not present in global settings, check legacy syntax. diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 72333d80673b9b..534c35394a79bb 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -75,6 +75,11 @@ function block_core_image_should_render_lightbox( $block ) { // the global settings. } else { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); + + // If not present in global settings, check the top-level global settings. + if ( ! isset( $lightbox_settings['enabled'] ) ) { + $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); + } } $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; From 4b43b30755c2abd5224d4e70a77b9d35899e9fc5 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 5 Sep 2023 22:52:03 -0400 Subject: [PATCH 18/64] Add backwards support for enabling fade animation via the legacy syntax --- lib/blocks.php | 5 +++++ packages/block-library/src/image/index.php | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/blocks.php b/lib/blocks.php index 2312709677b77c..ecb8ebdd7d3448 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -488,6 +488,11 @@ function gutenberg_should_render_lightbox( $block ) { 'none' === $link_destination ) { $block['lightboxEnabled'] = true; + + // The legacy syntax allows setting the animation type. + if ( isset( $lightbox_settings['animation'] ) ) { + $block['lightboxAnimation'] = $lightbox_settings['animation']; + } } return $block; diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 534c35394a79bb..a510d6dd82f1ef 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -126,8 +126,13 @@ function block_core_image_render_lightbox( $block_content, $block ) { } $content = $processor->get_updated_html(); - // Currently, the only supported animation is 'zoom'. + // Currently, the only animation type surfaced in the UI is the default + // zoom animation; however, here is also support for the legacy syntax, + // which supported configuring a fade animation as well. $lightbox_animation = 'zoom'; + if ( isset( $block['lightboxAnimation'] ) ) { + $lightbox_animation = $block['lightboxAnimation']; + } // 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 ); From ce3c33809ce2e5ea181fbba7f5439938524f38f2 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 5 Sep 2023 23:55:31 -0400 Subject: [PATCH 19/64] Fix PHP linter errors --- lib/class-wp-theme-json-gutenberg.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index d27a8cb2b2c057..5d19c34eefd3d3 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -386,8 +386,8 @@ class WP_Theme_JSON_Gutenberg { 'allowEditing' => null, ), 'lightbox' => array( - 'enabled' => null, - 'allowEditing' => null, + 'enabled' => null, + 'allowEditing' => null, ), 'position' => array( 'fixed' => null, @@ -421,7 +421,7 @@ class WP_Theme_JSON_Gutenberg { 'textTransform' => null, 'writingMode' => null, ), - 'behaviors' => null, + 'behaviors' => null, ); /** From 03e60d715d877554d4e82ebc727833c07e730b2d Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 6 Sep 2023 09:06:35 -0400 Subject: [PATCH 20/64] Fix error when checking lightbox['enabled'] value in global settings --- lib/blocks.php | 4 ++-- packages/block-library/src/image/index.php | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 2be957165a8128..8b6e6be4670681 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -471,7 +471,7 @@ function gutenberg_should_render_lightbox( $block ) { } // If not present in global settings, check legacy syntax. - if ( ! isset( $lightbox_settings ) || is_null( $lightbox_settings['enabled'] ) ) { + if ( ! isset( $lightbox_settings['enabled'] ) ) { $theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data(); if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) { $lightbox_settings = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox']; @@ -481,7 +481,7 @@ function gutenberg_should_render_lightbox( $block ) { $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; // If the lightbox is enabled, the image is not linked, flag the lightbox to be rendered. - if ( isset( $lightbox_settings ) && + if ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] && 'none' === $link_destination ) { diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index b81d7f65a2da3a..969bd555fae642 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -90,7 +90,7 @@ function block_core_image_should_render_lightbox( $block ) { $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. - if ( isset( $lightbox_settings ) && + if ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] && 'none' === $link_destination ) { From 050c63692495ba51721765d8d6ab19649be4a528 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Wed, 6 Sep 2023 18:41:50 +0100 Subject: [PATCH 21/64] Empty commit From 521d9501f3f6aed758f90acc433a1f423da60ef4 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 7 Sep 2023 13:00:16 +0100 Subject: [PATCH 22/64] Remove the default `false` value for `lightbox.enabled`attribute. --- packages/block-library/src/image/block.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 0bf238b0f51981..b8c0432866d968 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -36,8 +36,7 @@ "lightbox": { "type": "object", "enabled": { - "type": "boolean", - "default": false + "type": "boolean" } }, "title": { From 1db73c5fe23bfafe0431943d4b1aaad6e00b7851 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 7 Sep 2023 12:51:37 -0400 Subject: [PATCH 23/64] Add deprecation notice for 'behaviors' in image block I needed to add 'behaviors' back to the block.json attributes in order to read them on the JavaScript side in the editor to fire the deprecation notice. --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/image/block.json | 3 +++ packages/block-library/src/image/image.js | 17 +++++++++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index b9474350478474..97b9691f671a64 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -340,7 +340,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre - **Name:** core/image - **Category:** media - **Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone) -- **Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width +- **Attributes:** align, alt, aspectRatio, behaviors, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width ## Latest Comments diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index b8c0432866d968..cdf49a103b8777 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -33,6 +33,9 @@ "selector": "figcaption", "__experimentalRole": "content" }, + "behaviors": { + "type": "object" + }, "lightbox": { "type": "object", "enabled": { diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index df4549b0f26658..6a0ee567fbb813 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -67,6 +67,7 @@ import { isExternalImage } from './edit'; */ import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants'; import { evalAspectRatio } from './utils'; +import deprecated from '@wordpress/deprecated'; const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis ); @@ -761,6 +762,22 @@ export default function Image( { ); } + const { behaviors } = attributes; + + if ( behaviors ) { + deprecated( 'Lightbox using `behaviors` syntax', { + since: '16.7 on 2023.09.27', + version: '16.9 on 2023.10.11', + alternative: 'new lightbox syntax', + plugin: 'Gutenberg', + link: 'https://github.com/WordPress/gutenberg/pull/54071', + hint: `You can update your lightbox settings with the new syntax + by toggling the image block's Expand on Click setting in the global styles + or block settings, or by modifying settings in theme.json with + { 'blocks': { 'core/image' : { 'lightbox' : { 'enabled': true | false } } } }`, + } ); + } + return ( <> { /* Hide controls during upload to avoid component remount, From 79dad34fabcb526d268fc27d25aef037a8a594b7 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Sat, 9 Sep 2023 19:58:39 -0400 Subject: [PATCH 24/64] Add deprecation for attribute in image block --- .../block-library/src/image/deprecated.js | 212 +++++++++++++++++- 1 file changed, 211 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index 83816e1e3f74e6..decc2e9b4632ef 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -941,4 +941,214 @@ const v7 = { }, }; -export default [ v7, v6, v5, v4, v3, v2, v1 ]; +const v8 = { + attributes: { + align: { + type: 'string', + }, + behaviors: { + type: 'object', + }, + url: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'src', + __experimentalRole: 'content', + }, + alt: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'alt', + default: '', + __experimentalRole: 'content', + }, + caption: { + type: 'string', + source: 'html', + selector: 'figcaption', + __experimentalRole: 'content', + }, + title: { + type: 'string', + source: 'attribute', + selector: 'img', + attribute: 'title', + __experimentalRole: 'content', + }, + href: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'href', + __experimentalRole: 'content', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'rel', + }, + linkClass: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'class', + }, + id: { + type: 'number', + __experimentalRole: 'content', + }, + width: { + type: 'string', + }, + height: { + type: 'string', + }, + aspectRatio: { + type: 'string', + }, + scale: { + type: 'string', + }, + sizeSlug: { + type: 'string', + }, + linkDestination: { + type: 'string', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'figure > a', + attribute: 'target', + }, + }, + supports: { + anchor: true, + color: { + text: false, + background: false, + }, + filter: { + duotone: true, + }, + __experimentalBorder: { + color: true, + radius: true, + width: true, + __experimentalSkipSerialization: true, + __experimentalDefaultControls: { + color: true, + radius: true, + width: true, + }, + }, + }, + migrate( { width, height, ...attributes } ) { + const { + behaviors: { + lightbox: { enabled, animation }, + }, + } = attributes; + const newAttributes = { + ...attributes, + lightbox: { + enabled, + animation, + }, + }; + delete newAttributes.behaviors; + return newAttributes; + }, + isEligible( attributes ) { + return !! attributes.behaviors; + }, + save( { attributes } ) { + const { + url, + alt, + caption, + align, + href, + rel, + linkClass, + width, + height, + aspectRatio, + scale, + id, + linkTarget, + sizeSlug, + title, + } = attributes; + + const newRel = ! rel ? undefined : rel; + const borderProps = getBorderClassesAndStyles( attributes ); + + const classes = classnames( { + [ `align${ align }` ]: align, + [ `size-${ sizeSlug }` ]: sizeSlug, + 'is-resized': width || height, + 'has-custom-border': + !! borderProps.className || + ( borderProps.style && + Object.keys( borderProps.style ).length > 0 ), + } ); + + const imageClasses = classnames( borderProps.className, { + [ `wp-image-${ id }` ]: !! id, + } ); + + const image = ( + { + ); + + const figure = ( + <> + { href ? ( + + { image } + + ) : ( + image + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } + + ); + + return ( +

+ { figure } +
+ ); + }, +}; + +export default [ v8, v7, v6, v5, v4, v3, v2, v1 ]; From 871ba454ca5ce9906805219527a989b3a59c8ee5 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Sat, 9 Sep 2023 20:03:24 -0400 Subject: [PATCH 25/64] Remove obsolete code now that block deprecation is in place --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/image/block.json | 3 --- packages/block-library/src/image/image.js | 17 ----------------- 3 files changed, 1 insertion(+), 21 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 0b710b9bf2c7c9..8d65afc1150c59 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -339,7 +339,7 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre - **Name:** core/image - **Category:** media - **Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone) -- **Attributes:** align, alt, aspectRatio, behaviors, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width +- **Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width ## Latest Comments diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index cdf49a103b8777..b8c0432866d968 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -33,9 +33,6 @@ "selector": "figcaption", "__experimentalRole": "content" }, - "behaviors": { - "type": "object" - }, "lightbox": { "type": "object", "enabled": { diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 6a0ee567fbb813..df4549b0f26658 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -67,7 +67,6 @@ import { isExternalImage } from './edit'; */ import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants'; import { evalAspectRatio } from './utils'; -import deprecated from '@wordpress/deprecated'; const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis ); @@ -762,22 +761,6 @@ export default function Image( { ); } - const { behaviors } = attributes; - - if ( behaviors ) { - deprecated( 'Lightbox using `behaviors` syntax', { - since: '16.7 on 2023.09.27', - version: '16.9 on 2023.10.11', - alternative: 'new lightbox syntax', - plugin: 'Gutenberg', - link: 'https://github.com/WordPress/gutenberg/pull/54071', - hint: `You can update your lightbox settings with the new syntax - by toggling the image block's Expand on Click setting in the global styles - or block settings, or by modifying settings in theme.json with - { 'blocks': { 'core/image' : { 'lightbox' : { 'enabled': true | false } } } }`, - } ); - } - return ( <> { /* Hide controls during upload to avoid component remount, From 7f2f70fc5bd7c2ed3e9f18d47a09e1d118a8a891 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Sun, 10 Sep 2023 22:54:41 -0400 Subject: [PATCH 26/64] Add support for 'lightbox: true' syntax --- lib/blocks.php | 16 ++++++++-------- lib/class-wp-theme-json-gutenberg.php | 5 +---- .../global-styles/image-settings-panel.js | 5 ++++- packages/block-library/src/image/image.js | 13 ++++--------- packages/block-library/src/image/index.php | 17 +++++++++++------ 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 8b6e6be4670681..0d15f472de8c22 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -465,13 +465,13 @@ function gutenberg_should_render_lightbox( $block ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); // If not present in global settings, check the top-level global settings. - if ( ! isset( $lightbox_settings['enabled'] ) ) { + if ( true !== $lightbox_settings && ! isset( $lightbox_settings['enabled'] ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); } } // If not present in global settings, check legacy syntax. - if ( ! isset( $lightbox_settings['enabled'] ) ) { + if ( ! isset( $lightbox_settings ) || ( isset( $lightbox_settings ) && ! isset( $lightbox_settings['enabled'] ) ) ) { $theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data(); if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) { $lightbox_settings = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox']; @@ -480,12 +480,12 @@ function gutenberg_should_render_lightbox( $block ) { $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; - // If the lightbox is enabled, the image is not linked, flag the lightbox to be rendered. - if ( isset( $lightbox_settings['enabled'] ) && - true === $lightbox_settings['enabled'] && - 'none' === $link_destination - ) { - $block['lightboxEnabled'] = true; + // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. + if ( isset( $lightbox_settings ) && 'none' === $link_destination ) { + + if ( true === $lightbox_settings || ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) ) { + $block['lightboxEnabled'] = true; + } // The legacy syntax allows setting the animation type. if ( isset( $lightbox_settings['animation'] ) ) { diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 5d19c34eefd3d3..d919455d9e5e84 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -385,10 +385,7 @@ class WP_Theme_JSON_Gutenberg { 'wideSize' => null, 'allowEditing' => null, ), - 'lightbox' => array( - 'enabled' => null, - 'allowEditing' => null, - ), + 'lightbox' => null, 'position' => array( 'fixed' => null, 'sticky' => null, diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 68f8ead50c5edd..aa96eccee16c58 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -28,6 +28,9 @@ export default function ImageSettingsPanel( { } ); }; + const lightboxChecked = + settings?.lightbox === true ? true : !! settings?.lightbox?.enabled; + return ( <> diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index df4549b0f26658..9d16d409e28dbb 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -371,15 +371,10 @@ export default function Image( { const lightboxSetting = useSetting( 'lightbox' ); - const lightboxChecked = useMemo( () => { - // If the lightbox is set in the block attributes, use that. - if ( lightbox?.enabled ) return true; - - // If the lightbox is NOT set in the block attributes AND it IS enabled in - // the settings, use that. - if ( ! lightbox && lightboxSetting?.enabled ) return true; - return false; - }, [ lightbox, lightboxSetting ] ); + const lightboxChecked = + lightbox?.enabled || + ( ! lightbox && lightboxSetting === true ) || + lightboxSetting?.enabled; const controls = ( <> diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 969bd555fae642..0bd186c25b61b8 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -82,7 +82,7 @@ function block_core_image_should_render_lightbox( $block ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); // If not present in global settings, check the top-level global settings. - if ( ! isset( $lightbox_settings['enabled'] ) ) { + if ( true !== $lightbox_settings && ! isset( $lightbox_settings['enabled'] ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); } } @@ -90,11 +90,16 @@ function block_core_image_should_render_lightbox( $block ) { $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. - if ( isset( $lightbox_settings['enabled'] ) && - true === $lightbox_settings['enabled'] && - 'none' === $link_destination - ) { - $block['lightboxEnabled'] = true; + if ( isset( $lightbox_settings ) && 'none' === $link_destination ) { + + if ( true === $lightbox_settings || ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) ) { + $block['lightboxEnabled'] = true; + } + + // The legacy syntax allows setting the animation type. + if ( isset( $lightbox_settings['animation'] ) ) { + $block['lightboxAnimation'] = $lightbox_settings['animation']; + } } return $block; From 6da3545848524cf9e4c9f990a9c12f14a2278860 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Mon, 11 Sep 2023 00:00:39 -0400 Subject: [PATCH 27/64] Fix lightbox 'checked' attribute being read improperly --- packages/block-library/src/image/image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 9d16d409e28dbb..6f3f903d6a5b3b 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -374,7 +374,7 @@ export default function Image( { const lightboxChecked = lightbox?.enabled || ( ! lightbox && lightboxSetting === true ) || - lightboxSetting?.enabled; + ( ! lightbox && lightboxSetting?.enabled ); const controls = ( <> From 83bef30c0b2afead27a6583a5a870949c2171690 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Mon, 11 Sep 2023 09:56:37 -0400 Subject: [PATCH 28/64] Add conditional display for settings panel at image block level --- packages/block-library/src/image/image.js | 37 +++++++++++++---------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 6f3f903d6a5b3b..6d106fa5176fc4 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -371,6 +371,9 @@ export default function Image( { const lightboxSetting = useSetting( 'lightbox' ); + const showLightboxToggle = + lightboxSetting === true || lightboxSetting?.allowEditing === true; + const lightboxChecked = lightbox?.enabled || ( ! lightbox && lightboxSetting === true ) || @@ -531,24 +534,26 @@ export default function Image( { onChange={ updateImage } options={ imageSizeOptions } /> - !! lightbox } - label={ __( 'Expand on Click' ) } - onDeselect={ () => { - setAttributes( { lightbox: undefined } ); - } } - isShownByDefault={ true } - > - !! lightbox } label={ __( 'Expand on Click' ) } - checked={ lightboxChecked } - onChange={ ( newValue ) => { - setAttributes( { - lightbox: { enabled: newValue }, - } ); + onDeselect={ () => { + setAttributes( { lightbox: undefined } ); } } - /> - + isShownByDefault={ true } + > + { + setAttributes( { + lightbox: { enabled: newValue }, + } ); + } } + /> + + ) } From 52e358d02358955927c91005c660ef70ac355d56 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 11 Sep 2023 16:50:35 +0100 Subject: [PATCH 29/64] Fix an error with the theme.json schema. --- schemas/json/theme.json | 44 +++++++++++++++++++++++------------------ 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index be9dabd7ac4f12..82ed1700883f97 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -279,6 +279,26 @@ } } }, + "settingsPropertiesLightbox": { + "type": "object", + "additionalProperties": false, + "properties": { + "lightbox": { + "description": "Settings related to the lightbox.", + "type": "object", + "properties": { + "enabled": { + "description": "Defines whether the lightbox is enabled or not.", + "type": "boolean" + }, + "allowEditing": { + "description": "Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor.", + "type": "boolean" + } + } + } + } + }, "settingsPropertiesPosition": { "type": "object", "properties": { @@ -662,23 +682,10 @@ } } }, - "settingsPropertiesLightbox": { - "type": "object", - "additionalProperties": false, - "properties": { - "enabled": { - "description": "Defines whether the lightbox is enabled or not.", - "type": "boolean" - }, - "allowEditing": { - "description": "Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor.", - "type": "boolean" - } - } - }, "settingsProperties": { "allOf": [ { "$ref": "#/definitions/settingsPropertiesAppearanceTools" }, + { "$ref": "#/definitions/settingsPropertiesLightbox" }, { "$ref": "#/definitions/settingsPropertiesBorder" }, { "$ref": "#/definitions/settingsPropertiesColor" }, { "$ref": "#/definitions/settingsPropertiesDimensions" }, @@ -687,8 +694,7 @@ { "$ref": "#/definitions/settingsPropertiesPosition" }, { "$ref": "#/definitions/settingsPropertiesSpacing" }, { "$ref": "#/definitions/settingsPropertiesTypography" }, - { "$ref": "#/definitions/settingsPropertiesCustom" }, - { "$ref": "#/definitions/settingsPropertiesLightbox" } + { "$ref": "#/definitions/settingsPropertiesCustom" } ] }, "settingsPropertiesComplete": { @@ -704,12 +710,12 @@ "color": {}, "dimensions": {}, "layout": {}, + "lightbox": {}, "position": {}, "shadow": {}, "spacing": {}, "typography": {}, - "custom": {}, - "lightbox": {} + "custom": {} }, "additionalProperties": false } @@ -2173,6 +2179,7 @@ }, "color": {}, "layout": {}, + "lightbox": {}, "spacing": {}, "typography": {}, "border": {}, @@ -2180,7 +2187,6 @@ "position": {}, "dimensions": {}, "custom": {}, - "lightbox": {}, "blocks": { "description": "Settings defined on a per-block basis.", "$ref": "#/definitions/settingsBlocksPropertiesComplete" From 11e96e2b2d1b27a160501cbe571e7dbb51c019b6 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 11 Sep 2023 16:51:37 +0100 Subject: [PATCH 30/64] Update docs with `npm run build:docs` --- .../theme-json-reference/theme-json-living.md | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 9fdd17565038ea..83ee6a618b7834 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -119,6 +119,17 @@ Settings related to layout. --- +### lightbox + +Settings related to the lightbox. + +| Property | Type | Default | Props | +| --- | --- | --- |--- | +| enabled | boolean | | | +| allowEditing | boolean | | | + +--- + ### position Settings related to position. @@ -172,20 +183,6 @@ Settings related to typography. Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name. ---- - -### enabled - -Defines whether the lightbox is enabled or not. - - ---- - -### allowEditing - -Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor. - - --- ## Styles From 59e0dbeff5fe38ce7cd5274acbce2d573a4c82ab Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 11 Sep 2023 17:11:53 +0100 Subject: [PATCH 31/64] Copy `class-wp-theme-json-schema.php` from core into `class-wp-theme-json-schema-gutenberg.php` --- lib/class-wp-theme-json-gutenberg.php | 4 +- lib/class-wp-theme-json-schema-gutenberg.php | 155 +++++++++++++++++++ lib/load.php | 1 + 3 files changed, 158 insertions(+), 2 deletions(-) create mode 100644 lib/class-wp-theme-json-schema-gutenberg.php diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index d919455d9e5e84..155ddaf23253fd 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -616,7 +616,7 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) { $origin = 'theme'; } - $this->theme_json = WP_Theme_JSON_Schema::migrate( $theme_json ); + $this->theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); $registry = WP_Block_Type_Registry::get_instance(); $valid_block_names = array_keys( $registry->get_all_registered() ); $valid_element_names = array_keys( static::ELEMENTS ); @@ -2859,7 +2859,7 @@ protected static function filter_slugs( $node, $slugs ) { public static function remove_insecure_properties( $theme_json ) { $sanitized = array(); - $theme_json = WP_Theme_JSON_Schema::migrate( $theme_json ); + $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json ); $valid_block_names = array_keys( static::get_blocks_metadata() ); $valid_element_names = array_keys( static::ELEMENTS ); diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php new file mode 100644 index 00000000000000..7fa95450393eb3 --- /dev/null +++ b/lib/class-wp-theme-json-schema-gutenberg.php @@ -0,0 +1,155 @@ + 'border.radius', + 'spacing.customMargin' => 'spacing.margin', + 'spacing.customPadding' => 'spacing.padding', + 'typography.customLineHeight' => 'typography.lineHeight', + ); + + /** + * Function that migrates a given theme.json structure to the last version. + * + * @since 5.9.0 + * + * @param array $theme_json The structure to migrate. + * + * @return array The structure in the last version. + */ + public static function migrate( $theme_json ) { + if ( ! isset( $theme_json['version'] ) ) { + $theme_json = array( + 'version' => WP_Theme_JSON::LATEST_SCHEMA, + ); + } + + if ( 1 === $theme_json['version'] ) { + $theme_json = self::migrate_v1_to_v2( $theme_json ); + } + + return $theme_json; + } + + /** + * Removes the custom prefixes for a few properties + * that were part of v1: + * + * 'border.customRadius' => 'border.radius', + * 'spacing.customMargin' => 'spacing.margin', + * 'spacing.customPadding' => 'spacing.padding', + * 'typography.customLineHeight' => 'typography.lineHeight', + * + * @since 5.9.0 + * + * @param array $old Data to migrate. + * + * @return array Data without the custom prefixes. + */ + private static function migrate_v1_to_v2( $old ) { + // Copy everything. + $new = $old; + + // Overwrite the things that changed. + if ( isset( $old['settings'] ) ) { + $new['settings'] = self::rename_paths( $old['settings'], self::V1_TO_V2_RENAMED_PATHS ); + } + + // Set the new version. + $new['version'] = 2; + + return $new; + } + + /** + * Processes the settings subtree. + * + * @since 5.9.0 + * + * @param array $settings Array to process. + * @param array $paths_to_rename Paths to rename. + * + * @return array The settings in the new format. + */ + private static function rename_paths( $settings, $paths_to_rename ) { + $new_settings = $settings; + + // Process any renamed/moved paths within default settings. + self::rename_settings( $new_settings, $paths_to_rename ); + + // Process individual block settings. + if ( isset( $new_settings['blocks'] ) && is_array( $new_settings['blocks'] ) ) { + foreach ( $new_settings['blocks'] as &$block_settings ) { + self::rename_settings( $block_settings, $paths_to_rename ); + } + } + + return $new_settings; + } + + /** + * Processes a settings array, renaming or moving properties. + * + * @since 5.9.0 + * + * @param array $settings Reference to settings either defaults or an individual block's. + * @param array $paths_to_rename Paths to rename. + */ + private static function rename_settings( &$settings, $paths_to_rename ) { + foreach ( $paths_to_rename as $original => $renamed ) { + $original_path = explode( '.', $original ); + $renamed_path = explode( '.', $renamed ); + $current_value = _wp_array_get( $settings, $original_path, null ); + + if ( null !== $current_value ) { + _wp_array_set( $settings, $renamed_path, $current_value ); + self::unset_setting_by_path( $settings, $original_path ); + } + } + } + + /** + * Removes a property from within the provided settings by its path. + * + * @since 5.9.0 + * + * @param array $settings Reference to the current settings array. + * @param array $path Path to the property to be removed. + */ + private static function unset_setting_by_path( &$settings, $path ) { + $tmp_settings = &$settings; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable + $last_key = array_pop( $path ); + foreach ( $path as $key ) { + $tmp_settings = &$tmp_settings[ $key ]; + } + + unset( $tmp_settings[ $last_key ] ); + } +} diff --git a/lib/load.php b/lib/load.php index af402b846492cc..6aabcce44d85f2 100644 --- a/lib/load.php +++ b/lib/load.php @@ -198,6 +198,7 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/global-styles-and-settings.php'; require __DIR__ . '/class-wp-theme-json-data-gutenberg.php'; require __DIR__ . '/class-wp-theme-json-gutenberg.php'; +require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php'; require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php'; require __DIR__ . '/class-wp-duotone-gutenberg.php'; require __DIR__ . '/blocks.php'; From 443aa5b4ed70eda9ae9279bc9e8653543212150d Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 11 Sep 2023 19:04:59 +0100 Subject: [PATCH 32/64] Add a theme.json migration to v3 away from behaviors and to a new, simpler syntax used by the lightbox. --- lib/blocks.php | 8 ---- lib/class-wp-theme-json-schema-gutenberg.php | 41 ++++++++++++++++++++ 2 files changed, 41 insertions(+), 8 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index 0d15f472de8c22..b983e498da3bdd 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -470,14 +470,6 @@ function gutenberg_should_render_lightbox( $block ) { } } - // If not present in global settings, check legacy syntax. - if ( ! isset( $lightbox_settings ) || ( isset( $lightbox_settings ) && ! isset( $lightbox_settings['enabled'] ) ) ) { - $theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data(); - if ( isset( $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox'] ) ) { - $lightbox_settings = $theme_data['behaviors']['blocks'][ $block['blockName'] ]['lightbox']; - } - } - $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php index 7fa95450393eb3..010ae9d6084072 100644 --- a/lib/class-wp-theme-json-schema-gutenberg.php +++ b/lib/class-wp-theme-json-schema-gutenberg.php @@ -55,6 +55,10 @@ public static function migrate( $theme_json ) { $theme_json = self::migrate_v1_to_v2( $theme_json ); } + if ( 2 === $theme_json['version'] ) { + $theme_json = self::migrate_v2_to_v3( $theme_json ); + } + return $theme_json; } @@ -88,6 +92,43 @@ private static function migrate_v1_to_v2( $old ) { return $new; } + + /** + * Migrate away from the previous syntax that used a top-level "behaviors" key + * in the `theme.json` to a new "lightbox" setting. + * + * @since 6.4.0 + * + * @param array $old Data with (potentially) behaviors. + * @return array Data with behaviors removed. + */ + private static function migrate_v2_to_v3( $old ) { + // Copy everything. + $new = $old; + + // Migrate the old behaviors syntax to the new "lightbox" syntax. + if ( isset( $old['behaviors']['blocks']['core/image']['lightbox']['enabled'] ) ) { + _wp_array_set( + $new, + array( 'settings', 'blocks', 'core/image', 'lightbox', 'enabled' ), + $old['behaviors']['blocks']['core/image']['lightbox']['enabled'] + ); + } + + if ( isset( $old['settings']['blocks']['core/image']['behaviors']['lightbox'] ) ) { + _wp_array_set( + $new, + array( 'settings', 'blocks', 'core/image', 'lightbox', 'allowEditing' ), + $old['settings']['blocks']['core/image']['behaviors']['lightbox'] + ); + } + + // Set the new version. + $new['version'] = 3; + + return $new; + } + /** * Processes the settings subtree. * From 6459d567adc9114e2b228de0e0b4ee7bf0f0a1e1 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 11 Sep 2023 19:26:10 +0100 Subject: [PATCH 33/64] Remove the `null` value from lightbox.enabled in `lib/theme.json` --- lib/class-wp-theme-json-schema-gutenberg.php | 4 ++-- lib/theme.json | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php index 010ae9d6084072..83378e33b69d14 100644 --- a/lib/class-wp-theme-json-schema-gutenberg.php +++ b/lib/class-wp-theme-json-schema-gutenberg.php @@ -97,8 +97,6 @@ private static function migrate_v1_to_v2( $old ) { * Migrate away from the previous syntax that used a top-level "behaviors" key * in the `theme.json` to a new "lightbox" setting. * - * @since 6.4.0 - * * @param array $old Data with (potentially) behaviors. * @return array Data with behaviors removed. */ @@ -115,6 +113,8 @@ private static function migrate_v2_to_v3( $old ) { ); } + // Migrate the behaviors setting to the new syntax. This setting controls + // whether the Lightbox UI shows up in the block editor. if ( isset( $old['settings']['blocks']['core/image']['behaviors']['lightbox'] ) ) { _wp_array_set( $new, diff --git a/lib/theme.json b/lib/theme.json index 5cb8f30335024f..671dd50227852b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -275,7 +275,6 @@ }, "core/image": { "lightbox": { - "enabled": null, "allowEditing": true } }, From 203649d28aa40a637d063160c9f57388d1f6a5d2 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 11 Sep 2023 20:26:36 +0100 Subject: [PATCH 34/64] Remove `behaviors` from VALID_TOP_LEVEL_KEYS & VALID_SETTINGS --- lib/class-wp-theme-json-gutenberg.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 3b521438557ad1..791ac80ace1cc0 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -331,7 +331,6 @@ class WP_Theme_JSON_Gutenberg { 'templateParts', 'title', 'version', - 'behaviors', ); /** @@ -421,7 +420,6 @@ class WP_Theme_JSON_Gutenberg { 'textTransform' => null, 'writingMode' => null, ), - 'behaviors' => null, ); /** From 0e63890cb1415266bdd292c5e477bc99b0d9595c Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Mon, 11 Sep 2023 18:01:02 -0400 Subject: [PATCH 35/64] Revise backwards compatibility for behaviors; add deprecation to block_supports --- lib/block-supports/behaviors.php | 9 +++ lib/blocks.php | 38 ++---------- lib/load.php | 1 + packages/block-library/src/image/index.php | 68 +++++++++------------- 4 files changed, 41 insertions(+), 75 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index b6692195eb5fb5..ee23371612c32e 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -44,6 +44,15 @@ function gutenberg_register_behaviors_support( $block_type ) { * @return string Filtered block content. */ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { + + // We've deprecated the lightbox implementation via behaviors. + // While we may continue to explore behaviors in the future, the lightbox + // logic seems very specific to the image and will likely never be a part + // of behaviors, even in the future. With that in mind, we've rewritten the lightbox + // to be a feature of the image block and will also soon remove the block_supports. + // See https://github.com/WordPress/gutenberg/issues/53403. + _deprecated_function( 'gutenberg_render_behaviors_support_lightbox', '17', '' ); + $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; // Get the lightbox setting from the block attributes. if ( isset( $block['attrs']['behaviors']['lightbox'] ) ) { diff --git a/lib/blocks.php b/lib/blocks.php index b983e498da3bdd..a69fe7469a6033 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -434,9 +434,8 @@ function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $si add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 ); - /** - * Check if the lightbox should be rendered for a given block. + * Complements the lightbox implementation for the 'core/image' block. * * This function is INTENTIONALLY left out of core as it only provides * backwards compatibility for the legacy lightbox syntax that was only @@ -444,7 +443,7 @@ function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $si * the block attrbutes and the `theme.json` file. * * @param array $block The block to check. - * @return array The block with the lightboxEnabled flag set if the lightbox should be rendered. + * @return array The block with the legacyLightboxSettings set if available. */ function gutenberg_should_render_lightbox( $block ) { @@ -452,37 +451,8 @@ function gutenberg_should_render_lightbox( $block ) { return $block; } - // Get the lightbox setting from the block attributes. - if ( isset( $block['attrs']['lightbox'] ) ) { - $lightbox_settings = $block['attrs']['lightbox']; - // If not present, check legacy syntax. - } elseif ( isset( $block['attrs']['behaviors']['lightbox'] ) ) { - $lightbox_settings = $block['attrs']['behaviors']['lightbox']; - } - - // If not present in block attributes, check global settings. - if ( ! isset( $lightbox_settings ) ) { - $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); - - // If not present in global settings, check the top-level global settings. - if ( true !== $lightbox_settings && ! isset( $lightbox_settings['enabled'] ) ) { - $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); - } - } - - $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; - - // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. - if ( isset( $lightbox_settings ) && 'none' === $link_destination ) { - - if ( true === $lightbox_settings || ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) ) { - $block['lightboxEnabled'] = true; - } - - // The legacy syntax allows setting the animation type. - if ( isset( $lightbox_settings['animation'] ) ) { - $block['lightboxAnimation'] = $lightbox_settings['animation']; - } + if ( isset( $block['attrs']['behaviors']['lightbox'] ) ) { + $block['legacyLightboxSettings'] = $block['attrs']['behaviors']['lightbox']; } return $block; diff --git a/lib/load.php b/lib/load.php index 662bf8dff0e98a..8bfda962d6e784 100644 --- a/lib/load.php +++ b/lib/load.php @@ -229,4 +229,5 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/block-supports/dimensions.php'; require __DIR__ . '/block-supports/duotone.php'; require __DIR__ . '/block-supports/shadow.php'; +require __DIR__ . '/block-supports/behaviors.php'; require __DIR__ . '/block-supports/background.php'; diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 0bd186c25b61b8..f19f18d4d8716b 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -31,31 +31,42 @@ function render_block_core_image( $attributes, $content, $block ) { $processor->set_attribute( 'data-id', $attributes['data-id'] ); } - $should_load_view_script = false; + $lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block ); + $link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none'; + $lightbox_enabled = false; - if ( isset( $block->parsed_block['lightboxEnabled'] ) ) { - $should_load_view_script = true; + // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. + if ( isset( $lightbox_settings ) && 'none' === $link_destination ) { + + if ( true === $lightbox_settings || ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) ) { + $lightbox_enabled = true; + } } // If at least one block in the page has the lightbox, mark the block type as interactive. - if ( $should_load_view_script ) { + if ( $lightbox_enabled ) { $block->block_type->supports['interactivity'] = true; } + // Determine whether the view script should be enqueued or not. $view_js_file = 'wp-block-image-view'; if ( ! wp_script_is( $view_js_file ) ) { $script_handles = $block->block_type->view_script_handles; // If the script is not needed, and it is still in the `view_script_handles`, remove it. - if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { + if ( ! $lightbox_enabled && in_array( $view_js_file, $script_handles, true ) ) { $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); } // If the script is needed, but it was previously removed, add it again. - if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { + if ( $lightbox_enabled && ! in_array( $view_js_file, $script_handles, true ) ) { $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); } } + if ( $lightbox_enabled ) { + return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block, $lightbox_settings ); + } + return $processor->get_updated_html(); } @@ -67,18 +78,18 @@ function render_block_core_image( $attributes, $content, $block ) { * @param array $block Block data. * @return array Filtered block data. */ -function block_core_image_should_render_lightbox( $block ) { - - if ( 'core/image' !== $block['blockName'] ) { - return $block; - } +function block_core_image_get_lightbox_settings( $block ) { // Get the lightbox setting from the block attributes. if ( isset( $block['attrs']['lightbox'] ) ) { $lightbox_settings = $block['attrs']['lightbox']; // If the lightbox setting is not set in the block attributes, get it from // the global settings. - } else { + } elseif ( isset( $block['legacyLightboxSettings'] ) ) { + $lightbox_settings = $block['legacyLightboxSettings']; + } + + if ( ! isset( $lightbox_settings ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); // If not present in global settings, check the top-level global settings. @@ -87,25 +98,8 @@ function block_core_image_should_render_lightbox( $block ) { } } - $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; - - // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. - if ( isset( $lightbox_settings ) && 'none' === $link_destination ) { - - if ( true === $lightbox_settings || ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) ) { - $block['lightboxEnabled'] = true; - } - - // The legacy syntax allows setting the animation type. - if ( isset( $lightbox_settings['animation'] ) ) { - $block['lightboxAnimation'] = $lightbox_settings['animation']; - } - } - - return $block; + return $lightbox_settings ?? null; } -add_filter( 'render_block_data', 'block_core_image_should_render_lightbox', 10, 1 ); - /** * Add the directives and layout needed for the lightbox behavior. @@ -114,11 +108,7 @@ function block_core_image_should_render_lightbox( $block ) { * @param array $block Block object. * @return string Filtered block content. */ -function block_core_image_render_lightbox( $block_content, $block ) { - - if ( ! isset( $block['lightboxEnabled'] ) || false === $block['lightboxEnabled'] ) { - return $block_content; - } +function block_core_image_render_lightbox( $block_content, $block, $lightbox_settings ) { $processor = new WP_HTML_Tag_Processor( $block_content ); @@ -140,8 +130,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { // zoom animation; however, here is also support for the legacy syntax, // which supported configuring a fade animation as well. $lightbox_animation = 'zoom'; - if ( isset( $block['lightboxAnimation'] ) ) { - $lightbox_animation = $block['lightboxAnimation']; + 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. @@ -290,10 +280,6 @@ function block_core_image_render_lightbox( $block_content, $block ) { return str_replace( '', $lightbox_html . '', $body_content ); } -// Use priority 15 to run this hook after other hooks/plugins. -// They could use the `render_block_{$this->name}` filter to modify the markup. -add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 ); - /** * Registers the `core/image` block on server. */ From 8b721a77162570c9fb7346911f074142380108ba Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 12 Sep 2023 13:46:06 +0100 Subject: [PATCH 36/64] Remove outdated comment --- lib/blocks.php | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/blocks.php b/lib/blocks.php index a69fe7469a6033..34ca844ee0d18a 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -458,7 +458,4 @@ function gutenberg_should_render_lightbox( $block ) { return $block; } -// Run with a priority of 15 to ensure it runs after -// `block_core_image_should_render_lightbox` core filter (that has a -// priority of 10). add_filter( 'render_block_data', 'gutenberg_should_render_lightbox', 15, 1 ); From 8287c46ab9f7aaa6d3379e8bb07706b919417c23 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 12 Sep 2023 13:53:00 +0100 Subject: [PATCH 37/64] Update outdated comment --- packages/block-library/src/image/index.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index f19f18d4d8716b..90f290b2f2b135 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -83,8 +83,10 @@ function block_core_image_get_lightbox_settings( $block ) { // Get the lightbox setting from the block attributes. if ( isset( $block['attrs']['lightbox'] ) ) { $lightbox_settings = $block['attrs']['lightbox']; - // If the lightbox setting is not set in the block attributes, get it from - // the global settings. + // If the lightbox setting is not set in the block attributes, + // check the legacy lightbox settings that are set using the + // `gutenberg_should_render_lightbox` filter. + // We can remove this elseif statement when the legacy lightbox settings are removed. } elseif ( isset( $block['legacyLightboxSettings'] ) ) { $lightbox_settings = $block['legacyLightboxSettings']; } From a2c2b9419e317107837c94efada9d75bf0857fc2 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 12 Sep 2023 14:04:30 +0100 Subject: [PATCH 38/64] Update comment and shuffle the lines so the diff is easier on the eyes. --- packages/block-library/src/image/index.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 90f290b2f2b135..d0220d2d2f5250 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -31,9 +31,9 @@ function render_block_core_image( $attributes, $content, $block ) { $processor->set_attribute( 'data-id', $attributes['data-id'] ); } - $lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block ); - $link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none'; $lightbox_enabled = false; + $link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none'; + $lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block ); // If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered. if ( isset( $lightbox_settings ) && 'none' === $link_destination ) { @@ -106,8 +106,9 @@ function block_core_image_get_lightbox_settings( $block ) { /** * Add 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. + * @param array $lightbox_settings Lightbox settings: enabled, animation. * @return string Filtered block content. */ function block_core_image_render_lightbox( $block_content, $block, $lightbox_settings ) { From 4f0709b2e81b40fe45bfec986bd9182226977f26 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 12 Sep 2023 15:43:05 +0100 Subject: [PATCH 39/64] Update comment to explain why we use userSettings in image-settings-panel.js --- .../src/components/global-styles/image-settings-panel.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index aa96eccee16c58..9be951d7211731 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -39,6 +39,10 @@ export default function ImageSettingsPanel( { panelId={ panelId } > !! userSettings?.lightbox } label={ __( 'Expand on Click' ) } onDeselect={ resetLightbox } From 7018ee7c263009aa5366e8c47beac01f7983cd20 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 12 Sep 2023 10:50:30 -0400 Subject: [PATCH 40/64] Remove support for legacy fade configuration --- packages/block-library/src/image/deprecated.js | 3 +-- packages/block-library/src/image/index.php | 11 +++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index decc2e9b4632ef..4205da8e117b91 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -1049,14 +1049,13 @@ const v8 = { migrate( { width, height, ...attributes } ) { const { behaviors: { - lightbox: { enabled, animation }, + lightbox: { enabled }, }, } = attributes; const newAttributes = { ...attributes, lightbox: { enabled, - animation, }, }; delete newAttributes.behaviors; diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index d0220d2d2f5250..971b5bac58363d 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -64,7 +64,7 @@ function render_block_core_image( $attributes, $content, $block ) { } if ( $lightbox_enabled ) { - return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block, $lightbox_settings ); + return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block ); } return $processor->get_updated_html(); @@ -111,7 +111,7 @@ function block_core_image_get_lightbox_settings( $block ) { * @param array $lightbox_settings Lightbox settings: enabled, animation. * @return string Filtered block content. */ -function block_core_image_render_lightbox( $block_content, $block, $lightbox_settings ) { +function block_core_image_render_lightbox( $block_content, $block ) { $processor = new WP_HTML_Tag_Processor( $block_content ); @@ -129,13 +129,8 @@ function block_core_image_render_lightbox( $block_content, $block, $lightbox_set } $content = $processor->get_updated_html(); - // Currently, the only animation type surfaced in the UI is the default - // zoom animation; however, here is also support for the legacy syntax, - // which supported configuring a fade animation as well. + // Currently, we are only enabling the zoom animation. $lightbox_animation = 'zoom'; - 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 ); From 7fd0801711ed4b804a4d64a7a999db10ba44d34d Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 12 Sep 2023 12:47:44 -0400 Subject: [PATCH 41/64] Resolve lint error --- packages/block-library/src/image/index.php | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 971b5bac58363d..f88c879ff824ee 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -108,7 +108,6 @@ function block_core_image_get_lightbox_settings( $block ) { * * @param string $block_content Rendered block content. * @param array $block Block object. - * @param array $lightbox_settings Lightbox settings: enabled, animation. * @return string Filtered block content. */ function block_core_image_render_lightbox( $block_content, $block ) { From 5bb05bcac5cd743188bd959b6a3d4be2389316cd Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 12 Sep 2023 15:04:14 -0400 Subject: [PATCH 42/64] Add clarifying comment regarding lightbox markup --- lib/block-supports/behaviors.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index ee23371612c32e..915f5129fb75db 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -50,6 +50,8 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { // logic seems very specific to the image and will likely never be a part // of behaviors, even in the future. With that in mind, we've rewritten the lightbox // to be a feature of the image block and will also soon remove the block_supports. + // *Note: This logic for generating the lightbox markup has been duplicated and moved + // to the image block's index.php.* // See https://github.com/WordPress/gutenberg/issues/53403. _deprecated_function( 'gutenberg_render_behaviors_support_lightbox', '17', '' ); From a02910c59e64e755043289f78a29721697843e8d Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 12 Sep 2023 20:41:37 +0100 Subject: [PATCH 43/64] Rename the migrate function to reflect that it's not a v3 migration --- lib/class-wp-theme-json-schema-gutenberg.php | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php index 83378e33b69d14..51f1c867ff7c78 100644 --- a/lib/class-wp-theme-json-schema-gutenberg.php +++ b/lib/class-wp-theme-json-schema-gutenberg.php @@ -56,7 +56,7 @@ public static function migrate( $theme_json ) { } if ( 2 === $theme_json['version'] ) { - $theme_json = self::migrate_v2_to_v3( $theme_json ); + $theme_json = self::migrate_deprecated_lightbox_behaviors( $theme_json ); } return $theme_json; @@ -97,10 +97,12 @@ private static function migrate_v1_to_v2( $old ) { * Migrate away from the previous syntax that used a top-level "behaviors" key * in the `theme.json` to a new "lightbox" setting. * + * @since 16.7.0 + * * @param array $old Data with (potentially) behaviors. * @return array Data with behaviors removed. */ - private static function migrate_v2_to_v3( $old ) { + private static function migrate_deprecated_lightbox_behaviors( $old ) { // Copy everything. $new = $old; @@ -123,9 +125,6 @@ private static function migrate_v2_to_v3( $old ) { ); } - // Set the new version. - $new['version'] = 3; - return $new; } From b12d38605206f8da777962da79d680bc68360358 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 12 Sep 2023 20:42:02 +0100 Subject: [PATCH 44/64] Add a `@since` in `gutenberg_should_render_lightbox` docblock --- lib/blocks.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/lib/blocks.php b/lib/blocks.php index 34ca844ee0d18a..17e22e49c1ce74 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -442,6 +442,8 @@ function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $si * introduced in Gutenberg. The legacy syntax was using the `behaviors` key in * the block attrbutes and the `theme.json` file. * + * @since 16.7.0 + * * @param array $block The block to check. * @return array The block with the legacyLightboxSettings set if available. */ From 2f5f122e5e2e505d4ccacffc2957df15cd63d628 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 12 Sep 2023 19:04:25 -0400 Subject: [PATCH 45/64] Add support for reading top-level 'lightbox' setting in editor By default, we read the lightbox settings underneath the 'core/image' in theme.json; however, the 'enabled' property there is undefined by default, which means it should be possible to declare a top-level setting for the lightbox that overrides an undefined block-level setting. While this appeared to be working on the PHP side, the UI wasn't accurately reflecting this inheritance structure, so this commit fixes that. Users should now be able to define a top-level lightbox setting as either 'lightbox: true' or 'lightbox: { enabled: true }' that will be used if the block-level lightbox setting for 'enabled' is undefined. --- .../global-styles/image-settings-panel.js | 4 +- packages/block-library/src/image/image.js | 38 +++++++++++++++--- .../components/global-styles/screen-block.js | 40 ++++++++++++++++++- 3 files changed, 73 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 9be951d7211731..921593bd06e7ea 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -15,7 +15,7 @@ export function useHasImageSettingsPanel( name, settings ) { export default function ImageSettingsPanel( { onChange, userSettings, - settings, + lightboxSettings, panelId, } ) { const resetLightbox = () => { @@ -29,7 +29,7 @@ export default function ImageSettingsPanel( { }; const lightboxChecked = - settings?.lightbox === true ? true : !! settings?.lightbox?.enabled; + lightboxSettings === true ? true : !! lightboxSettings?.enabled; return ( <> diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 6d106fa5176fc4..29733416d1db41 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -24,7 +24,6 @@ import { __experimentalImageURLInputUI as ImageURLInputUI, MediaReplaceFlow, store as blockEditorStore, - useSetting, BlockAlignmentControl, __experimentalImageEditor as ImageEditor, __experimentalGetElementClassName, @@ -369,15 +368,44 @@ export default function Image( { availableUnits: [ 'px' ], } ); - const lightboxSetting = useSetting( 'lightbox' ); + const lightboxSettings = useSelect( ( select ) => { + const settings = select( blockEditorStore ).getSettings(); + const blockSettings = + settings.__experimentalFeatures?.blocks?.[ 'core/image' ]?.lightbox; + const defaultsSetting = settings.__experimentalFeatures?.lightbox; + + // By default, the theme.json lightbox 'enabled' property is + // undefined in theme.json, so we need to check the top-level + // settings to see if the lightbox has been enabled there. + if ( + blockSettings && + blockSettings !== true && + ! blockSettings.hasOwnProperty( 'enabled' ) && + defaultsSetting + ) { + if ( defaultsSetting === true ) { + return { + ...blockSettings, + enabled: true, + }; + } else if ( defaultsSetting.hasOwnProperty( 'enabled' ) ) { + return { + ...blockSettings, + enabled: defaultsSetting.enabled, + }; + } + } + + return blockSettings ?? defaultsSetting; + }, [] ); const showLightboxToggle = - lightboxSetting === true || lightboxSetting?.allowEditing === true; + lightboxSettings === true || lightboxSettings?.allowEditing === true; const lightboxChecked = lightbox?.enabled || - ( ! lightbox && lightboxSetting === true ) || - ( ! lightbox && lightboxSetting?.enabled ); + ( ! lightbox && lightboxSettings === true ) || + ( ! lightbox && lightboxSettings?.enabled ); const controls = ( <> diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index ee81b629beab10..eed615440b7c9a 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -2,7 +2,10 @@ * WordPress dependencies */ import { getBlockType } from '@wordpress/blocks'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { + privateApis as blockEditorPrivateApis, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; @@ -219,6 +222,39 @@ function ScreenBlock( { name, variation } ) { setStyle( { ...newStyle, border: { ...updatedBorder, radius } } ); }; + const lightboxSettings = useSelect( ( select ) => { + const editorSettings = select( blockEditorStore ).getSettings(); + + const blockSettings = + editorSettings.__experimentalFeatures?.blocks?.[ 'core/image' ] + ?.lightbox; + const defaultsSetting = editorSettings.__experimentalFeatures?.lightbox; + + // By default, the theme.json lightbox 'enabled' property is + // undefined in theme.json, so we need to check the top-level + // settings to see if the lightbox has been enabled there. + if ( + blockSettings && + blockSettings !== true && + ! blockSettings.hasOwnProperty( 'enabled' ) && + defaultsSetting + ) { + if ( defaultsSetting === true ) { + return { + ...blockSettings, + enabled: true, + }; + } else if ( defaultsSetting.hasOwnProperty( 'enabled' ) ) { + return { + ...blockSettings, + enabled: defaultsSetting.enabled, + }; + } + } + + return blockSettings ?? defaultsSetting; + }, [] ); + return ( <> ) } From a238d94b906a5a40aefb064e996470e012648081 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 08:49:22 -0400 Subject: [PATCH 46/64] Revert "Add support for reading top-level 'lightbox' setting in editor" This reverts commit 2f5f122e5e2e505d4ccacffc2957df15cd63d628. --- .../global-styles/image-settings-panel.js | 4 +- packages/block-library/src/image/image.js | 38 +++--------------- .../components/global-styles/screen-block.js | 40 +------------------ 3 files changed, 9 insertions(+), 73 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 921593bd06e7ea..9be951d7211731 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -15,7 +15,7 @@ export function useHasImageSettingsPanel( name, settings ) { export default function ImageSettingsPanel( { onChange, userSettings, - lightboxSettings, + settings, panelId, } ) { const resetLightbox = () => { @@ -29,7 +29,7 @@ export default function ImageSettingsPanel( { }; const lightboxChecked = - lightboxSettings === true ? true : !! lightboxSettings?.enabled; + settings?.lightbox === true ? true : !! settings?.lightbox?.enabled; return ( <> diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 29733416d1db41..6d106fa5176fc4 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -24,6 +24,7 @@ import { __experimentalImageURLInputUI as ImageURLInputUI, MediaReplaceFlow, store as blockEditorStore, + useSetting, BlockAlignmentControl, __experimentalImageEditor as ImageEditor, __experimentalGetElementClassName, @@ -368,44 +369,15 @@ export default function Image( { availableUnits: [ 'px' ], } ); - const lightboxSettings = useSelect( ( select ) => { - const settings = select( blockEditorStore ).getSettings(); - const blockSettings = - settings.__experimentalFeatures?.blocks?.[ 'core/image' ]?.lightbox; - const defaultsSetting = settings.__experimentalFeatures?.lightbox; - - // By default, the theme.json lightbox 'enabled' property is - // undefined in theme.json, so we need to check the top-level - // settings to see if the lightbox has been enabled there. - if ( - blockSettings && - blockSettings !== true && - ! blockSettings.hasOwnProperty( 'enabled' ) && - defaultsSetting - ) { - if ( defaultsSetting === true ) { - return { - ...blockSettings, - enabled: true, - }; - } else if ( defaultsSetting.hasOwnProperty( 'enabled' ) ) { - return { - ...blockSettings, - enabled: defaultsSetting.enabled, - }; - } - } - - return blockSettings ?? defaultsSetting; - }, [] ); + const lightboxSetting = useSetting( 'lightbox' ); const showLightboxToggle = - lightboxSettings === true || lightboxSettings?.allowEditing === true; + lightboxSetting === true || lightboxSetting?.allowEditing === true; const lightboxChecked = lightbox?.enabled || - ( ! lightbox && lightboxSettings === true ) || - ( ! lightbox && lightboxSettings?.enabled ); + ( ! lightbox && lightboxSetting === true ) || + ( ! lightbox && lightboxSetting?.enabled ); const controls = ( <> diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index eed615440b7c9a..ee81b629beab10 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -2,10 +2,7 @@ * WordPress dependencies */ import { getBlockType } from '@wordpress/blocks'; -import { - privateApis as blockEditorPrivateApis, - store as blockEditorStore, -} from '@wordpress/block-editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; @@ -222,39 +219,6 @@ function ScreenBlock( { name, variation } ) { setStyle( { ...newStyle, border: { ...updatedBorder, radius } } ); }; - const lightboxSettings = useSelect( ( select ) => { - const editorSettings = select( blockEditorStore ).getSettings(); - - const blockSettings = - editorSettings.__experimentalFeatures?.blocks?.[ 'core/image' ] - ?.lightbox; - const defaultsSetting = editorSettings.__experimentalFeatures?.lightbox; - - // By default, the theme.json lightbox 'enabled' property is - // undefined in theme.json, so we need to check the top-level - // settings to see if the lightbox has been enabled there. - if ( - blockSettings && - blockSettings !== true && - ! blockSettings.hasOwnProperty( 'enabled' ) && - defaultsSetting - ) { - if ( defaultsSetting === true ) { - return { - ...blockSettings, - enabled: true, - }; - } else if ( defaultsSetting.hasOwnProperty( 'enabled' ) ) { - return { - ...blockSettings, - enabled: defaultsSetting.enabled, - }; - } - } - - return blockSettings ?? defaultsSetting; - }, [] ); - return ( <> ) } From 0aba3c4ce53ae2dc59cbf4a6f99028675c697349 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Wed, 13 Sep 2023 22:53:22 +0100 Subject: [PATCH 47/64] Add correct deprecation mentioning the Gutenberg version --- lib/block-supports/behaviors.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 915f5129fb75db..58377b946f5a76 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -53,7 +53,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { // *Note: This logic for generating the lightbox markup has been duplicated and moved // to the image block's index.php.* // See https://github.com/WordPress/gutenberg/issues/53403. - _deprecated_function( 'gutenberg_render_behaviors_support_lightbox', '17', '' ); + _deprecated_function( 'gutenberg_render_behaviors_support_lightbox', 'Gutenberg 17.0.0', '' ); $link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none'; // Get the lightbox setting from the block attributes. From 8fa991e066df6e7893b21260a7b83b28818887c9 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 18:06:46 -0400 Subject: [PATCH 48/64] Move 'allowEditing' to top-level settings --- lib/theme.json | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index 671dd50227852b..a1f45bc0e95a15 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -189,6 +189,9 @@ ], "text": true }, + "lightbox": { + "allowEditing": true + }, "shadow": { "defaultPresets": true, "presets": [ @@ -273,11 +276,6 @@ "radius": true } }, - "core/image": { - "lightbox": { - "allowEditing": true - } - }, "core/pullquote": { "border": { "color": true, From 65b173c95214e8f72eb3ac748ecfe1a7a247ae19 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 18:08:40 -0400 Subject: [PATCH 49/64] Fix top-level lightbox setting not being read properly --- packages/block-editor/src/components/global-styles/hooks.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 4bbc9c40588e03..d8dde2a01caf65 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -50,6 +50,7 @@ const VALID_SETTINGS = [ 'layout.contentSize', 'layout.definitions', 'layout.wideSize', + 'lightbox', 'lightbox.enabled', 'lightbox.allowEditing', 'position.fixed', From b5f8186d4266bd156ff0456cc6216ca0da6e2601 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 18:10:14 -0400 Subject: [PATCH 50/64] Fix 'false' values in theme.json not being stored in settings object --- packages/block-editor/src/components/global-styles/hooks.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index d8dde2a01caf65..23c402f54d5826 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -118,7 +118,7 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) { `settings${ appendedBlockPath }.${ setting }` ) ?? getValueFromObjectPath( configToUse, `settings.${ setting }` ); - if ( value ) { + if ( value !== null && value !== undefined ) { result = setImmutably( result, setting.split( '.' ), value ); } } ); From 7e121da4afdbf47cdf95a836fa02c1a31a1c3b85 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 18:11:28 -0400 Subject: [PATCH 51/64] Fix error wherein 'undefined' was being passed to input component --- .../src/components/global-styles/image-settings-panel.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 9be951d7211731..c050a2a6855a96 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -28,8 +28,13 @@ export default function ImageSettingsPanel( { } ); }; - const lightboxChecked = - settings?.lightbox === true ? true : !! settings?.lightbox?.enabled; + let lightboxChecked = false; + + if ( settings?.lightbox === true ) { + lightboxChecked = true; + } else if ( settings?.lightbox?.enabled ) { + lightboxChecked = settings.lightbox.enabled; + } return ( <> From fb103845d62745987e408b986ab61827c1b65538 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 18:22:59 -0400 Subject: [PATCH 52/64] Fix bug wherein lightbox UI would disappear if user value was set --- .../global-styles/image-settings-panel.js | 13 +++++++++++-- .../src/components/global-styles/screen-block.js | 6 +++++- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index c050a2a6855a96..95e2253c165a96 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -8,8 +8,17 @@ import { } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; -export function useHasImageSettingsPanel( name, settings ) { - return name === 'core/image' && settings?.lightbox?.allowEditing; +export function useHasImageSettingsPanel( name, settings, userSettings ) { + // Note: If lightbox userSettings exists, that means + // they were defined via the Global Styles UI and + // will NOT be a boolean value or contain the `allowEditing` + // property, so we should show the settings panel in those cases. + return ( + ( name === 'core/image' && + ( settings?.lightbox === true || + settings?.lightbox?.allowEditing ) ) || + !! userSettings?.lightbox + ); } export default function ImageSettingsPanel( { diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index ee81b629beab10..f2bc5e920067d5 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -116,7 +116,11 @@ function ScreenBlock( { name, variation } ) { const hasDimensionsPanel = useHasDimensionsPanel( settings ); const hasEffectsPanel = useHasEffectsPanel( settings ); const hasFiltersPanel = useHasFiltersPanel( settings ); - const hasImageSettingsPanel = useHasImageSettingsPanel( name, settings ); + const hasImageSettingsPanel = useHasImageSettingsPanel( + name, + settings, + userSettings + ); const hasVariationsPanel = !! blockVariations?.length && ! variation; const { canEditCSS } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = From ef8f43ee318f8b1c99df4b791f617bf2326265df Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 18:23:57 -0400 Subject: [PATCH 53/64] Remove inheritance when determining whether to enable lightbox Rather than trying to check if the 'enabled' has been set or not and falling back to other levels of the theme.json inheritance structure, I decided to just read and use the settings as defined in theme.json. This is the expected behavior in Gutenberg from what I understand and has less edge cases. --- 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 f88c879ff824ee..f38fa94fa16bd3 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -95,7 +95,7 @@ function block_core_image_get_lightbox_settings( $block ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); // If not present in global settings, check the top-level global settings. - if ( true !== $lightbox_settings && ! isset( $lightbox_settings['enabled'] ) ) { + if ( ! isset( $lightbox_settings ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); } } From fc8fc4757bf87bf3e3e23a4f0c8940f7294cf485 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 13 Sep 2023 19:00:39 -0400 Subject: [PATCH 54/64] Update comment --- lib/class-wp-theme-json-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 791ac80ace1cc0..8c1f5c050d5ef0 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -346,7 +346,7 @@ class WP_Theme_JSON_Gutenberg { * `position.fixed` and `position.sticky`. * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`. * @since 6.4.0 Added `layout.allowEditing`. - * @since 6.4.0 Added `lightbox.enabled` and `lightbox.allowEditing`. + * @since 6.4.0 Added `lightbox`. * @var array */ const VALID_SETTINGS = array( From 6ea39f8fc1e292b4f2829062d58d65192aa9ebce Mon Sep 17 00:00:00 2001 From: Michal Date: Thu, 14 Sep 2023 12:00:49 +0100 Subject: [PATCH 55/64] Update whitespace in theme.json Co-authored-by: Alex Lende --- schemas/json/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index c214ddef35aba1..e0f3efc01eb1fc 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -708,7 +708,7 @@ { "$ref": "#/definitions/settingsPropertiesDimensions" }, { "$ref": "#/definitions/settingsPropertiesShadow" }, { "$ref": "#/definitions/settingsPropertiesLayout" }, - { "$ref": "#/definitions/settingsPropertiesLightbox" }, + { "$ref": "#/definitions/settingsPropertiesLightbox" }, { "$ref": "#/definitions/settingsPropertiesPosition" }, { "$ref": "#/definitions/settingsPropertiesSpacing" }, { "$ref": "#/definitions/settingsPropertiesTypography" }, From aaab1efb05df644c0ef8636c6f13c4a7cb2dcb57 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 14 Sep 2023 12:18:28 +0100 Subject: [PATCH 56/64] Add docblocks to clarify that `class-wp-theme-json-schema-gutenberg.php` is only put in GB as a temporary migration. --- lib/class-wp-theme-json-schema-gutenberg.php | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php index 51f1c867ff7c78..d11545751af362 100644 --- a/lib/class-wp-theme-json-schema-gutenberg.php +++ b/lib/class-wp-theme-json-schema-gutenberg.php @@ -2,9 +2,12 @@ /** * WP_Theme_JSON_Schema_Gutenberg class * - * @package WordPress - * @subpackage Theme - * @since 5.9.0 + * This class/file will NOT be backported to Core. It exists to provide a + * migration path for theme.json files that used the deprecated "behaviors". + * This file will be removed from Gutenberg in version 17.0.0. + * + * @package gutenberg + * @since 16.7.0 */ if ( class_exists( 'WP_Theme_JSON_Schema_Gutenberg' ) ) { @@ -97,6 +100,10 @@ private static function migrate_v1_to_v2( $old ) { * Migrate away from the previous syntax that used a top-level "behaviors" key * in the `theme.json` to a new "lightbox" setting. * + * This function SHOULD NOT be ported to Core!!! + * + * It is a temporary migration that will be removed in Gutenberg 17.0.0 + * * @since 16.7.0 * * @param array $old Data with (potentially) behaviors. From 61bfb3d9452c9c638a3ea1ff142864c16eec08b8 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 14 Sep 2023 12:19:20 +0100 Subject: [PATCH 57/64] Add comments to clarify that behaviors.php is temporarily added to GB an will be removed in a future version. --- lib/block-supports/behaviors.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 58377b946f5a76..cf668ed22d8875 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -2,6 +2,10 @@ /** * Behaviors block support flag. * + * This file will NOT be backported to Core. It exists to provide a + * migration path for theme.json files that used the deprecated "behaviors". + * This file will be removed from Gutenberg in version 17.0.0. + * * @package gutenberg */ @@ -37,7 +41,6 @@ function gutenberg_register_behaviors_support( $block_type ) { /** * Add the directives and layout needed for the lightbox behavior. - * This functions shouldn't be in this file. It should be moved to a package (or somewhere else), where all the behaviors logic is defined. * * @param string $block_content Rendered block content. * @param array $block Block object. From c18e283e3092d17520fc376bf9169297acabb814 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 14 Sep 2023 13:52:13 +0100 Subject: [PATCH 58/64] Added integration fixtures for the lightbox --- ...ecated-v8-deprecate-behaviors-lightbox.html | 3 +++ ...ecated-v8-deprecate-behaviors-lightbox.json | 18 ++++++++++++++++++ ...v8-deprecate-behaviors-lightbox.parsed.json | 18 ++++++++++++++++++ ...eprecate-behaviors-lightbox.serialized.html | 3 +++ 4 files changed, 42 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json create mode 100644 test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html new file mode 100644 index 00000000000000..9feeb105951daa --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.html @@ -0,0 +1,3 @@ + +
+ diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json new file mode 100644 index 00000000000000..a32f031dd34f43 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.json @@ -0,0 +1,18 @@ +[ + { + "name": "core/image", + "isValid": true, + "attributes": { + "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", + "alt": "", + "caption": "", + "lightbox": { + "enabled": true + }, + "id": 8, + "sizeSlug": "large", + "linkDestination": "none" + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json new file mode 100644 index 00000000000000..0ca652ff77f835 --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/image", + "attrs": { + "lightbox": { + "enabled": true + }, + "id": 8, + "sizeSlug": "large", + "linkDestination": "none" + }, + "innerBlocks": [], + "innerHTML": "\n
\"\"
\n", + "innerContent": [ + "\n
\"\"
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html new file mode 100644 index 00000000000000..9feeb105951daa --- /dev/null +++ b/test/integration/fixtures/blocks/core__image__deprecated-v8-deprecate-behaviors-lightbox.serialized.html @@ -0,0 +1,3 @@ + +
+ From dab7f5acb8ebf7a54742676a48175e9654faf3b2 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 14 Sep 2023 13:28:04 -0400 Subject: [PATCH 59/64] Fix incorrect reading of global lightbox settings --- 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 f38fa94fa16bd3..114475a981c599 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -95,7 +95,7 @@ function block_core_image_get_lightbox_settings( $block ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); // If not present in global settings, check the top-level global settings. - if ( ! isset( $lightbox_settings ) ) { + if ( ! is_bool( $lightbox_settings ) && ! isset( $lightbox_settings['enabled'] ) && ! isset( $lightbox_settings['allowEditing'] ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); } } From a5c2f0c38251c7671b00628be3ff07ed13e96f1b Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 14 Sep 2023 19:48:51 +0100 Subject: [PATCH 60/64] Clarify the comment getting the global lightbox settings --- packages/block-library/src/image/index.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 114475a981c599..9603088cc704c2 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -95,7 +95,12 @@ function block_core_image_get_lightbox_settings( $block ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) ); // If not present in global settings, check the top-level global settings. - if ( ! is_bool( $lightbox_settings ) && ! isset( $lightbox_settings['enabled'] ) && ! isset( $lightbox_settings['allowEditing'] ) ) { + // + // NOTE: If no block-level settings are found, the previous call to + // `gutenberg_get_global_settings` will return the whole `theme.json` + // structure in which case we can check if the "lightbox" key is present at + // the top-level of the global settings and use its value. + if ( ! is_bool( $lightbox_settings ) && isset( $lightbox_settings['lightbox'] ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); } } From 485c19707df6009ad7bae180a4a0b97b4f265332 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Fri, 15 Sep 2023 13:56:00 +0100 Subject: [PATCH 61/64] =?UTF-8?q?Fix=20PHPCS=20parenthesis=20error=20?= =?UTF-8?q?=F0=9F=A4=A6=E2=80=8D=E2=99=82=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 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 9603088cc704c2..017258fabc6166 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -100,7 +100,7 @@ function block_core_image_get_lightbox_settings( $block ) { // `gutenberg_get_global_settings` will return the whole `theme.json` // structure in which case we can check if the "lightbox" key is present at // the top-level of the global settings and use its value. - if ( ! is_bool( $lightbox_settings ) && isset( $lightbox_settings['lightbox'] ) ) { + if ( ! is_bool( $lightbox_settings ) && isset( $lightbox_settings['lightbox'] ) ) { $lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) ); } } From d1432bc0c7846989e89c59b9a9ef09d772551745 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 15 Sep 2023 09:13:01 -0400 Subject: [PATCH 62/64] Move lightbox settings to the block level --- lib/theme.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index a1f45bc0e95a15..671dd50227852b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -189,9 +189,6 @@ ], "text": true }, - "lightbox": { - "allowEditing": true - }, "shadow": { "defaultPresets": true, "presets": [ @@ -276,6 +273,11 @@ "radius": true } }, + "core/image": { + "lightbox": { + "allowEditing": true + } + }, "core/pullquote": { "border": { "color": true, From ff1d2b5d319a53ef99b7055195df58c06c764a4d Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 15 Sep 2023 09:24:06 -0400 Subject: [PATCH 63/64] Remove support for shorthand --- .../src/components/global-styles/image-settings-panel.js | 8 ++------ packages/block-library/src/image/image.js | 4 +--- packages/block-library/src/image/index.php | 4 ++-- 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js index 95e2253c165a96..d3850e5fc9722c 100644 --- a/packages/block-editor/src/components/global-styles/image-settings-panel.js +++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js @@ -14,9 +14,7 @@ export function useHasImageSettingsPanel( name, settings, userSettings ) { // will NOT be a boolean value or contain the `allowEditing` // property, so we should show the settings panel in those cases. return ( - ( name === 'core/image' && - ( settings?.lightbox === true || - settings?.lightbox?.allowEditing ) ) || + ( name === 'core/image' && settings?.lightbox?.allowEditing ) || !! userSettings?.lightbox ); } @@ -39,9 +37,7 @@ export default function ImageSettingsPanel( { let lightboxChecked = false; - if ( settings?.lightbox === true ) { - lightboxChecked = true; - } else if ( settings?.lightbox?.enabled ) { + if ( settings?.lightbox?.enabled ) { lightboxChecked = settings.lightbox.enabled; } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 3e192d695b5dfd..04839a47b880af 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -375,9 +375,7 @@ export default function Image( { lightboxSetting === true || lightboxSetting?.allowEditing === true; const lightboxChecked = - lightbox?.enabled || - ( ! lightbox && lightboxSetting === true ) || - ( ! lightbox && lightboxSetting?.enabled ); + lightbox?.enabled || ( ! lightbox && lightboxSetting?.enabled ); const dimensionsControl = ( Date: Fri, 15 Sep 2023 15:14:54 +0100 Subject: [PATCH 64/64] Remove 'lightbox' from hooks.js and add `.enabled` & `.allowEditing` to class-wp-theme-json-gutenberg.php --- lib/class-wp-theme-json-gutenberg.php | 5 ++++- packages/block-editor/src/components/global-styles/hooks.js | 3 +-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index a0dddc323a2b3e..bf7a706923a120 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -387,7 +387,10 @@ class WP_Theme_JSON_Gutenberg { 'wideSize' => null, 'allowEditing' => null, ), - 'lightbox' => null, + 'lightbox' => array( + 'enabled' => null, + 'allowEditing' => null, + ), 'position' => array( 'fixed' => null, 'sticky' => null, diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 23c402f54d5826..4bbc9c40588e03 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -50,7 +50,6 @@ const VALID_SETTINGS = [ 'layout.contentSize', 'layout.definitions', 'layout.wideSize', - 'lightbox', 'lightbox.enabled', 'lightbox.allowEditing', 'position.fixed', @@ -118,7 +117,7 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) { `settings${ appendedBlockPath }.${ setting }` ) ?? getValueFromObjectPath( configToUse, `settings.${ setting }` ); - if ( value !== null && value !== undefined ) { + if ( value ) { result = setImmutably( result, setting.split( '.' ), value ); } } );