From 4dae199fa8ef2abfedee9c48c0eb1f5d5a7c156d Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 26 Jul 2024 19:25:07 +0530 Subject: [PATCH 01/21] Add link control as toolbar option in gallery --- packages/block-library/src/gallery/edit.js | 88 ++++++++++++++++--- .../src/gallery/test/index.native.js | 2 +- 2 files changed, 76 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e853e20f23319c..f5eedfc2b92235 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -14,6 +14,9 @@ import { ToggleControl, RangeControl, Spinner, + MenuGroup, + MenuItem, + ToolbarDropdownMenu, withNotices, } from '@wordpress/components'; import { @@ -33,6 +36,12 @@ import { View } from '@wordpress/primitives'; import { createBlock } from '@wordpress/blocks'; import { createBlobURL } from '@wordpress/blob'; import { store as noticesStore } from '@wordpress/notices'; +import { + link as linkIcon, + customLink, + image as imageIcon, + linkOff, +} from '@wordpress/icons'; /** * Internal dependencies @@ -57,11 +66,23 @@ import GapStyles from './gap-styles'; const MAX_COLUMNS = 8; const linkOptions = [ - { value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) }, - { value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) }, { - value: LINK_DESTINATION_NONE, + icon: customLink, + label: __( 'Link images to attachment pages' ), + value: LINK_DESTINATION_ATTACHMENT, + noticeText: __( 'Attachment Pages' ), + }, + { + icon: imageIcon, + label: __( 'Link images to media files' ), + value: LINK_DESTINATION_MEDIA, + noticeText: __( 'Media Files' ), + }, + { + icon: linkOff, label: _x( 'None', 'Media item link option' ), + value: LINK_DESTINATION_NONE, + noticeText: __( 'None' ), }, ]; const ALLOWED_MEDIA_TYPES = [ 'image' ]; @@ -359,7 +380,7 @@ function GalleryEdit( props ) { sprintf( /* translators: %s: image size settings */ __( 'All gallery image links updated to: %s' ), - linkToText.label + linkToText.noticeText ), { id: 'gallery-attributes-linkTo', @@ -552,15 +573,17 @@ function GalleryEdit( props ) { size="__unstable-large" /> ) } - + { Platform.isNative ? ( + + ) : null } + { Platform.isWeb ? ( + + + { ( { onClose } ) => ( + + { linkOptions.map( ( linkItem ) => { + const isOptionSelected = + linkTo === linkItem.value; + return ( + { + setLinkTo( linkItem.value ); + onClose(); + } } + role="menuitemradio" + > + { linkItem.label } + + ); + } ) } + + ) } + + + ) : null } { Platform.isWeb && ( <> { ! multiGallerySelection && ( diff --git a/packages/block-library/src/gallery/test/index.native.js b/packages/block-library/src/gallery/test/index.native.js index fd95053bea62c0..370bac000b373b 100644 --- a/packages/block-library/src/gallery/test/index.native.js +++ b/packages/block-library/src/gallery/test/index.native.js @@ -615,7 +615,7 @@ describe( 'Gallery block', () => { // Set "Link to" setting via Gallery block settings await openBlockSettings( screen ); fireEvent.press( getByText( 'Link to' ) ); - fireEvent.press( getByText( 'Media File' ) ); + fireEvent.press( getByText( 'Link images to media files' ) ); expect( getEditorHtml() ).toMatchSnapshot(); } ); From 9284ea367fd28cd3aecd926bb03b75e589ef91f8 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 26 Jul 2024 19:28:00 +0530 Subject: [PATCH 02/21] Add link option constant for lightbox --- packages/block-library/src/gallery/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/constants.js b/packages/block-library/src/gallery/constants.js index f4a06914393132..19fc61cac84583 100644 --- a/packages/block-library/src/gallery/constants.js +++ b/packages/block-library/src/gallery/constants.js @@ -1,5 +1,6 @@ export const LINK_DESTINATION_NONE = 'none'; export const LINK_DESTINATION_MEDIA = 'media'; +export const LINK_DESTINATION_LIGHTBOX = 'lightbox'; export const LINK_DESTINATION_ATTACHMENT = 'attachment'; export const LINK_DESTINATION_MEDIA_WP_CORE = 'file'; export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post'; From ba7b2252f673c30e267df22c1be490ba0f925328 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 26 Jul 2024 19:29:01 +0530 Subject: [PATCH 03/21] Add expand on lick option in link control --- packages/block-library/src/gallery/edit.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index f5eedfc2b92235..24b9b4e83703b4 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -41,6 +41,7 @@ import { customLink, image as imageIcon, linkOff, + fullscreen, } from '@wordpress/icons'; /** @@ -58,6 +59,7 @@ import { LINK_DESTINATION_ATTACHMENT, LINK_DESTINATION_MEDIA, LINK_DESTINATION_NONE, + LINK_DESTINATION_LIGHTBOX, } from './constants'; import useImageSizes from './use-image-sizes'; import useGetNewImages from './use-get-new-images'; @@ -78,6 +80,13 @@ const linkOptions = [ value: LINK_DESTINATION_MEDIA, noticeText: __( 'Media Files' ), }, + { + icon: fullscreen, + label: __( 'Expand on click' ), + value: LINK_DESTINATION_LIGHTBOX, + noticeText: __( 'Lightbox effect' ), + infoText: __( 'Scales the image with a lightbox effect' ), + }, { icon: linkOff, label: _x( 'None', 'Media item link option' ), From 600c2a241d9b8095fef0aecf95f3d7619660fb9d Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 26 Jul 2024 19:29:57 +0530 Subject: [PATCH 04/21] Add class into menugroup component for info text style --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 24b9b4e83703b4..e5233ddf3243c3 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -633,7 +633,7 @@ function GalleryEdit( props ) { label={ __( 'Link To' ) } > { ( { onClose } ) => ( - + { linkOptions.map( ( linkItem ) => { const isOptionSelected = linkTo === linkItem.value; From 9342259086b39da4f344c1dfb97d70a8dc5c198d Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 26 Jul 2024 19:30:59 +0530 Subject: [PATCH 05/21] Add styles for info text in link control of popover of gallery block --- packages/block-library/src/gallery/editor.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 9efaf88e5acc71..3d64c012fbf689 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -199,3 +199,11 @@ justify-content: flex-end; gap: $grid-unit-15; } + +.blocks-gallery__link-to-control { + .components-menu-item__item { + .components-menu-item__info { + white-space: nowrap; + } + } +} \ No newline at end of file From f698871818d8f5cbf7385c1dcfa1aeaaa7911510 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 30 Jul 2024 15:22:40 +0530 Subject: [PATCH 06/21] Add info text for lightbox option in link control for gallery block --- packages/block-library/src/gallery/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 49d04f8fae923f..ffb49b594dcf89 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -655,6 +655,7 @@ function GalleryEdit( props ) { onClose(); } } role="menuitemradio" + info={ linkItem.infoText ?? false } > { linkItem.label } From cf487dd691a563cadbb7fbdfbb74e0cb5b37ae6f Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 31 Jul 2024 14:56:47 +0530 Subject: [PATCH 07/21] Add action for lightbox option in gallery block link control --- packages/block-library/src/gallery/utils.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index 15f2062ea943da..baca271f5ec728 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -7,6 +7,7 @@ import { LINK_DESTINATION_NONE, LINK_DESTINATION_MEDIA_WP_CORE, LINK_DESTINATION_ATTACHMENT_WP_CORE, + LINK_DESTINATION_LIGHTBOX, } from './constants'; import { LINK_DESTINATION_ATTACHMENT as IMAGE_LINK_DESTINATION_ATTACHMENT, @@ -43,6 +44,12 @@ export function getHrefAndDestination( href: image?.link, linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT, }; + case LINK_DESTINATION_LIGHTBOX: + return { + href: undefined, + lightbox: { enabled: true }, + linkDestination: IMAGE_LINK_DESTINATION_NONE, + }; case LINK_DESTINATION_NONE: return { href: undefined, From 9f490b472aaae1bd95d3adf6b2388b0148d984c4 Mon Sep 17 00:00:00 2001 From: akasunil Date: Thu, 1 Aug 2024 15:39:38 +0530 Subject: [PATCH 08/21] Show lightbox option only when lightbox UI is enabled --- packages/block-library/src/gallery/edit.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ffb49b594dcf89..688846a1af1025 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -27,6 +27,7 @@ import { useInnerBlocksProps, BlockControls, MediaReplaceFlow, + useSettings, } from '@wordpress/block-editor'; import { Platform, useEffect, useMemo } from '@wordpress/element'; import { __, _x, sprintf } from '@wordpress/i18n'; @@ -67,7 +68,7 @@ import useGetMedia from './use-get-media'; import GapStyles from './gap-styles'; const MAX_COLUMNS = 8; -const linkOptions = [ +let linkOptions = [ { icon: customLink, label: __( 'Link images to attachment pages' ), @@ -119,6 +120,23 @@ function GalleryEdit( props ) { onFocus, } = props; + const [ blockSetting ] = useSettings( 'blocks' ); + + const lightboxSetting = blockSetting.hasOwnProperty( 'core/image' ) + ? blockSetting[ 'core/image' ]?.lightbox + : false; + const isLightBoxEditingEnabled = lightboxSetting + ? lightboxSetting?.allowEditing + : true; + + useEffect( () => { + if ( ! isLightBoxEditingEnabled ) { + linkOptions = linkOptions.filter( + ( option ) => option.value !== LINK_DESTINATION_LIGHTBOX + ); + } + }, [] ); + const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } = attributes; From db15f40c29f389e5efc7aa15be8ee7d4ef361c2b Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 2 Aug 2024 12:26:35 +0530 Subject: [PATCH 09/21] Disable lightbox when other link option is selected in gallery block --- packages/block-library/src/gallery/utils.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index baca271f5ec728..39a87413da7693 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -37,12 +37,14 @@ export function getHrefAndDestination( return { href: image?.source_url || image?.url, // eslint-disable-line camelcase linkDestination: IMAGE_LINK_DESTINATION_MEDIA, + lightbox: { enabled: false }, }; case LINK_DESTINATION_ATTACHMENT_WP_CORE: case LINK_DESTINATION_ATTACHMENT: return { href: image?.link, linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT, + lightbox: { enabled: false }, }; case LINK_DESTINATION_LIGHTBOX: return { @@ -54,6 +56,7 @@ export function getHrefAndDestination( return { href: undefined, linkDestination: IMAGE_LINK_DESTINATION_NONE, + lightbox: { enabled: false }, }; } From bfd6bbdd656c5ab7c37c784c2db051d80e8e180f Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 2 Aug 2024 12:27:13 +0530 Subject: [PATCH 10/21] Remove unneccessory constant --- packages/block-library/src/gallery/edit.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 688846a1af1025..2facaf435f959e 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -125,12 +125,9 @@ function GalleryEdit( props ) { const lightboxSetting = blockSetting.hasOwnProperty( 'core/image' ) ? blockSetting[ 'core/image' ]?.lightbox : false; - const isLightBoxEditingEnabled = lightboxSetting - ? lightboxSetting?.allowEditing - : true; useEffect( () => { - if ( ! isLightBoxEditingEnabled ) { + if ( ! lightboxSetting?.allowEditing ) { linkOptions = linkOptions.filter( ( option ) => option.value !== LINK_DESTINATION_LIGHTBOX ); From a3ce1059c794810e646df608029ff49908527975 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 2 Aug 2024 14:37:32 +0530 Subject: [PATCH 11/21] Conditionally apply the lightbox attribute based on defatult setting --- packages/block-library/src/gallery/edit.js | 35 ++++++++++++++++++--- packages/block-library/src/gallery/utils.js | 4 +-- 2 files changed, 31 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 2facaf435f959e..7ec1c8fe8e92ac 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -254,13 +254,38 @@ function GalleryEdit( props ) { ); } + let hrefAndDestination = getHrefAndDestination( + image, + linkTo, + imageAttributes?.linkDestination + ); + + if ( + linkTo === LINK_DESTINATION_LIGHTBOX && + ! lightboxSetting?.enabled + ) { + hrefAndDestination = { + ...hrefAndDestination, + lightbox: { enabled: true }, + }; + } else if ( + linkTo !== LINK_DESTINATION_LIGHTBOX && + lightboxSetting?.enabled + ) { + hrefAndDestination = { + ...hrefAndDestination, + lightbox: { enabled: false }, + }; + } else { + hrefAndDestination = { + ...hrefAndDestination, + lightbox: undefined, + }; + } + return { ...pickRelevantMediaFiles( image, sizeSlug ), - ...getHrefAndDestination( - image, - linkTo, - imageAttributes?.linkDestination - ), + ...hrefAndDestination, ...newLinkTarget, className: newClassName, sizeSlug, diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index 39a87413da7693..53bab38533b9ec 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -37,14 +37,12 @@ export function getHrefAndDestination( return { href: image?.source_url || image?.url, // eslint-disable-line camelcase linkDestination: IMAGE_LINK_DESTINATION_MEDIA, - lightbox: { enabled: false }, }; case LINK_DESTINATION_ATTACHMENT_WP_CORE: case LINK_DESTINATION_ATTACHMENT: return { href: image?.link, linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT, - lightbox: { enabled: false }, }; case LINK_DESTINATION_LIGHTBOX: return { @@ -56,7 +54,7 @@ export function getHrefAndDestination( return { href: undefined, linkDestination: IMAGE_LINK_DESTINATION_NONE, - lightbox: { enabled: false }, + lightbox: { enabled: undefined }, }; } From 9bdcd09e15d1755d64eebef118d809072ae0fff9 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 6 Aug 2024 22:48:44 +0530 Subject: [PATCH 12/21] Fix lightbox default option issue for gallery block on page load --- packages/block-library/src/gallery/edit.js | 66 ++++++++++----------- packages/block-library/src/gallery/utils.js | 1 - 2 files changed, 32 insertions(+), 35 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 7ec1c8fe8e92ac..823d95b567993d 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -254,38 +254,13 @@ function GalleryEdit( props ) { ); } - let hrefAndDestination = getHrefAndDestination( - image, - linkTo, - imageAttributes?.linkDestination - ); - - if ( - linkTo === LINK_DESTINATION_LIGHTBOX && - ! lightboxSetting?.enabled - ) { - hrefAndDestination = { - ...hrefAndDestination, - lightbox: { enabled: true }, - }; - } else if ( - linkTo !== LINK_DESTINATION_LIGHTBOX && - lightboxSetting?.enabled - ) { - hrefAndDestination = { - ...hrefAndDestination, - lightbox: { enabled: false }, - }; - } else { - hrefAndDestination = { - ...hrefAndDestination, - lightbox: undefined, - }; - } - return { ...pickRelevantMediaFiles( image, sizeSlug ), - ...hrefAndDestination, + ...getHrefAndDestination( + image, + linkTo, + imageAttributes?.linkDestination + ), ...newLinkTarget, className: newClassName, sizeSlug, @@ -415,10 +390,33 @@ function GalleryEdit( props ) { const image = block.attributes.id ? imageData.find( ( { id } ) => id === block.attributes.id ) : null; - changedAttributes[ block.clientId ] = getHrefAndDestination( - image, - value - ); + + let hrefAndDestination = getHrefAndDestination( image, value ); + + if ( + value === LINK_DESTINATION_LIGHTBOX && + ! lightboxSetting?.enabled + ) { + hrefAndDestination = { + ...hrefAndDestination, + lightbox: { enabled: true }, + }; + } else if ( + value !== LINK_DESTINATION_LIGHTBOX && + lightboxSetting?.enabled + ) { + hrefAndDestination = { + ...hrefAndDestination, + lightbox: { enabled: false }, + }; + } else { + hrefAndDestination = { + ...hrefAndDestination, + lightbox: undefined, + }; + } + + changedAttributes[ block.clientId ] = hrefAndDestination; } ); updateBlockAttributes( blocks, changedAttributes, true ); const linkToText = [ ...linkOptions ].find( diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index 53bab38533b9ec..baca271f5ec728 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -54,7 +54,6 @@ export function getHrefAndDestination( return { href: undefined, linkDestination: IMAGE_LINK_DESTINATION_NONE, - lightbox: { enabled: undefined }, }; } From aa70389c57c144e984e2a97613aec1358e95444f Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 6 Aug 2024 23:04:09 +0530 Subject: [PATCH 13/21] Highlight link to option in gallery block when selected --- packages/block-library/src/gallery/edit.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 823d95b567993d..deae04e4d05945 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -132,7 +132,7 @@ function GalleryEdit( props ) { ( option ) => option.value !== LINK_DESTINATION_LIGHTBOX ); } - }, [] ); + }, [ lightboxSetting?.allowEditing ] ); const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } = attributes; @@ -669,6 +669,9 @@ function GalleryEdit( props ) { { ( { onClose } ) => ( From 524ea5a3961799848732922e73166299ca30dcd7 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 7 Aug 2024 11:36:53 +0530 Subject: [PATCH 14/21] update condition to Highlight link to option --- packages/block-library/src/gallery/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index deae04e4d05945..f8924821188c1b 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -670,7 +670,7 @@ function GalleryEdit( props ) { icon={ linkIcon } label={ __( 'Link' ) } toggleProps={ { - isPressed: linkTo === LINK_DESTINATION_NONE, + isPressed: hasLinkTo, } } > { ( { onClose } ) => ( From 7fcd7ea6ee5101d4548f6406bda25a51d36ad447 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 7 Aug 2024 15:44:33 +0530 Subject: [PATCH 15/21] Fix lightbox attribute issue for default state of linkTo option --- packages/block-library/src/gallery/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index f8924821188c1b..7385bc43f88c43 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -402,6 +402,7 @@ function GalleryEdit( props ) { lightbox: { enabled: true }, }; } else if ( + value !== LINK_DESTINATION_NONE && value !== LINK_DESTINATION_LIGHTBOX && lightboxSetting?.enabled ) { From 8bf23390bc3d7f19076daee3d6158c1e3b15c9bd Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Tue, 13 Aug 2024 01:41:59 -0400 Subject: [PATCH 16/21] fix: Set empty default `block` settings value (#64448) Currently, `__experimentalFeatures` is only partially implemented for the native mobile editor. Recent changes to the shared Gallery block component included a reference to this missing key via the `useSettings` Hook. Setting a default, empty value ensure exceptions are not thrown. Co-authored-by: dcalhoun Co-authored-by: akasunil --- .../global-styles/test/use-global-styles-context.native.js | 1 + .../global-styles/use-global-styles-context.native.js | 6 ++++++ 2 files changed, 7 insertions(+) diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js index a247b4132b1ff7..a8b1e9e1bdf1b9 100644 --- a/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-context.native.js @@ -414,6 +414,7 @@ describe( 'getGlobalStyles', () => { expect( globalStyles ).toEqual( expect.objectContaining( { __experimentalFeatures: { + blocks: {}, color: { palette: RAW_FEATURES.color.palette, gradients, diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js index 31bcd899fda7a9..f4aedc378e1a73 100644 --- a/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js +++ b/packages/block-editor/src/components/global-styles/use-global-styles-context.native.js @@ -410,6 +410,9 @@ export function getColorsAndGradients( return { __experimentalGlobalStylesBaseStyles: null, __experimentalFeatures: { + // Set an empty object to avoid errors from shared web components relying + // upon block settings. E.g., the Gallery block. + blocks: {}, color: { ...( ! features?.color ? { @@ -455,6 +458,9 @@ export function getGlobalStyles( rawStyles, rawFeatures ) { return { __experimentalFeatures: { + // Set an empty object to avoid errors from shared web components relying + // upon block settings. E.g., the Gallery block. + blocks: {}, color: { palette: colors?.palette, gradients, From 20040eb63a30624a1fbca7f80e75c3c97c536934 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 13 Aug 2024 14:01:51 +0530 Subject: [PATCH 17/21] Change lightbox option lable and address other feedback --- packages/block-library/src/gallery/edit.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 887ac419773527..5f8d4a1fec3c81 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -83,7 +83,7 @@ let linkOptions = [ label: __( 'Expand on click' ), value: LINK_DESTINATION_LIGHTBOX, noticeText: __( 'Lightbox effect' ), - infoText: __( 'Scales the image with a lightbox effect' ), + infoText: __( 'Scale images with a lightbox effect' ), }, { icon: linkOff, @@ -117,11 +117,7 @@ export default function GalleryEdit( props ) { onFocus, } = props; - const [ blockSetting ] = useSettings( 'blocks' ); - - const lightboxSetting = blockSetting.hasOwnProperty( 'core/image' ) - ? blockSetting[ 'core/image' ]?.lightbox - : false; + const lightboxSetting = useSettings( 'blocks.core/image.lightbox' ); useEffect( () => { if ( ! lightboxSetting?.allowEditing ) { @@ -697,7 +693,7 @@ export default function GalleryEdit( props ) { onClose(); } } role="menuitemradio" - info={ linkItem.infoText ?? false } + info={ linkItem.infoText } > { linkItem.label } From a39977fd4bed92c8697720f5f8b0f8bc7057b0ea Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 16 Aug 2024 18:06:58 +0530 Subject: [PATCH 18/21] Move lightbox logic to getHrefAndDestination function --- packages/block-library/src/gallery/edit.js | 47 ++++++--------------- packages/block-library/src/gallery/utils.js | 16 ++++++- 2 files changed, 26 insertions(+), 37 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 5f8d4a1fec3c81..e21f81e0b0eec6 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -117,15 +117,13 @@ export default function GalleryEdit( props ) { onFocus, } = props; - const lightboxSetting = useSettings( 'blocks.core/image.lightbox' ); + const lightboxSetting = useSettings( 'blocks.core/image.lightbox' )[ 0 ]; - useEffect( () => { - if ( ! lightboxSetting?.allowEditing ) { - linkOptions = linkOptions.filter( - ( option ) => option.value !== LINK_DESTINATION_LIGHTBOX - ); - } - }, [ lightboxSetting?.allowEditing ] ); + if ( ! lightboxSetting?.allowEditing ) { + linkOptions = linkOptions.filter( + ( option ) => option.value !== LINK_DESTINATION_LIGHTBOX + ); + } const { columns, imageCrop, randomOrder, linkTarget, linkTo, sizeSlug } = attributes; @@ -384,33 +382,12 @@ export default function GalleryEdit( props ) { ? imageData.find( ( { id } ) => id === block.attributes.id ) : null; - let hrefAndDestination = getHrefAndDestination( image, value ); - - if ( - value === LINK_DESTINATION_LIGHTBOX && - ! lightboxSetting?.enabled - ) { - hrefAndDestination = { - ...hrefAndDestination, - lightbox: { enabled: true }, - }; - } else if ( - value !== LINK_DESTINATION_NONE && - value !== LINK_DESTINATION_LIGHTBOX && - lightboxSetting?.enabled - ) { - hrefAndDestination = { - ...hrefAndDestination, - lightbox: { enabled: false }, - }; - } else { - hrefAndDestination = { - ...hrefAndDestination, - lightbox: undefined, - }; - } - - changedAttributes[ block.clientId ] = hrefAndDestination; + changedAttributes[ block.clientId ] = getHrefAndDestination( + image, + value, + false, + lightboxSetting + ); } ); updateBlockAttributes( blocks, changedAttributes, true ); const linkToText = [ ...linkOptions ].find( diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index baca271f5ec728..0a23216ba50ad1 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -22,12 +22,15 @@ import { * @param {Object} image Gallery image. * @param {string} galleryDestination Gallery's selected link destination. * @param {Object} imageDestination Image blocks attributes. + * @param {Object} lightboxSetting Lightbox setting. + * * @return {Object} New attributes to assign to image block. */ export function getHrefAndDestination( image, galleryDestination, - imageDestination + imageDestination, + lightboxSetting ) { // Gutenberg and WordPress use different constants so if image_default_link_type // option is set we need to map from the WP Core values. @@ -37,23 +40,32 @@ export function getHrefAndDestination( return { href: image?.source_url || image?.url, // eslint-disable-line camelcase linkDestination: IMAGE_LINK_DESTINATION_MEDIA, + lightbox: lightboxSetting?.enabled + ? { enabled: false } + : undefined, }; case LINK_DESTINATION_ATTACHMENT_WP_CORE: case LINK_DESTINATION_ATTACHMENT: return { href: image?.link, linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT, + lightbox: lightboxSetting?.enabled + ? { enabled: false } + : undefined, }; case LINK_DESTINATION_LIGHTBOX: return { href: undefined, - lightbox: { enabled: true }, + lightbox: ! lightboxSetting?.enabled + ? { enabled: true } + : undefined, linkDestination: IMAGE_LINK_DESTINATION_NONE, }; case LINK_DESTINATION_NONE: return { href: undefined, linkDestination: IMAGE_LINK_DESTINATION_NONE, + lightbox: undefined, }; } From d79d610a4d9e464d6bf583bdf6a140ff2ae262c3 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 21 Aug 2024 15:02:28 +0530 Subject: [PATCH 19/21] Remove highlight of LinkTo option in gallery block --- packages/block-library/src/gallery/edit.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e21f81e0b0eec6..bbec08bcd84ed2 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -643,9 +643,6 @@ export default function GalleryEdit( props ) { { ( { onClose } ) => ( From 655433bdf432cd719533c6deb547cb10377eeb08 Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 21 Aug 2024 17:20:33 +0530 Subject: [PATCH 20/21] Remove css for info text of lightbox option --- packages/block-library/src/gallery/edit.js | 2 +- packages/block-library/src/gallery/editor.scss | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index bbec08bcd84ed2..e6670cc880b8dd 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -645,7 +645,7 @@ export default function GalleryEdit( props ) { label={ __( 'Link' ) } > { ( { onClose } ) => ( - + { linkOptions.map( ( linkItem ) => { const isOptionSelected = linkTo === linkItem.value; diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss index 9ca731fed63e55..025e86277f7edc 100644 --- a/packages/block-library/src/gallery/editor.scss +++ b/packages/block-library/src/gallery/editor.scss @@ -198,11 +198,3 @@ justify-content: flex-end; gap: $grid-unit-15; } - -.blocks-gallery__link-to-control { - .components-menu-item__item { - .components-menu-item__info { - white-space: nowrap; - } - } -} From 0e2b6ec98693b5064ac858d9f2cac6170636eaba Mon Sep 17 00:00:00 2001 From: akasunil Date: Wed, 21 Aug 2024 18:40:53 +0530 Subject: [PATCH 21/21] Refactor getHrefAndDestination function to for lightbox additional attributes --- packages/block-library/src/gallery/edit.js | 1 + packages/block-library/src/gallery/utils.js | 10 ++++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index e6670cc880b8dd..7a0cc1de53c387 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -386,6 +386,7 @@ export default function GalleryEdit( props ) { image, value, false, + block.attributes, lightboxSetting ); } ); diff --git a/packages/block-library/src/gallery/utils.js b/packages/block-library/src/gallery/utils.js index 0a23216ba50ad1..4b2aca81f6ffb3 100644 --- a/packages/block-library/src/gallery/utils.js +++ b/packages/block-library/src/gallery/utils.js @@ -21,7 +21,8 @@ import { * * @param {Object} image Gallery image. * @param {string} galleryDestination Gallery's selected link destination. - * @param {Object} imageDestination Image blocks attributes. + * @param {Object} imageDestination Image block link destination attribute. + * @param {Object} attributes Block attributes. * @param {Object} lightboxSetting Lightbox setting. * * @return {Object} New attributes to assign to image block. @@ -30,6 +31,7 @@ export function getHrefAndDestination( image, galleryDestination, imageDestination, + attributes, lightboxSetting ) { // Gutenberg and WordPress use different constants so if image_default_link_type @@ -41,7 +43,7 @@ export function getHrefAndDestination( href: image?.source_url || image?.url, // eslint-disable-line camelcase linkDestination: IMAGE_LINK_DESTINATION_MEDIA, lightbox: lightboxSetting?.enabled - ? { enabled: false } + ? { ...attributes?.lightbox, enabled: false } : undefined, }; case LINK_DESTINATION_ATTACHMENT_WP_CORE: @@ -50,14 +52,14 @@ export function getHrefAndDestination( href: image?.link, linkDestination: IMAGE_LINK_DESTINATION_ATTACHMENT, lightbox: lightboxSetting?.enabled - ? { enabled: false } + ? { ...attributes?.lightbox, enabled: false } : undefined, }; case LINK_DESTINATION_LIGHTBOX: return { href: undefined, lightbox: ! lightboxSetting?.enabled - ? { enabled: true } + ? { ...attributes?.lightbox, enabled: true } : undefined, linkDestination: IMAGE_LINK_DESTINATION_NONE, };