diff --git a/packages/block-editor/src/components/url-popover/image-url-input-ui.js b/packages/block-editor/src/components/url-popover/image-url-input-ui.js index ae59daa1f502b3..a7b40b42f6dd78 100644 --- a/packages/block-editor/src/components/url-popover/image-url-input-ui.js +++ b/packages/block-editor/src/components/url-popover/image-url-input-ui.js @@ -46,6 +46,7 @@ const ImageURLInputUI = ( { showLightboxSetting, lightboxEnabled, onSetLightbox, + resetLightbox, } ) => { const [ isOpen, setIsOpen ] = useState( false ); // Use internal state instead of a ref to make sure that the component @@ -241,7 +242,9 @@ const ImageURLInputUI = ( { ); const linkEditorValue = urlInput !== null ? urlInput : url; - const showLinkEditor = ( ! linkEditorValue && ! lightboxEnabled ) === true; + const hideLightboxPanel = + ! lightboxEnabled || ( lightboxEnabled && ! showLightboxSetting ); + const showLinkEditor = ! linkEditorValue && hideLightboxPanel; const urlLabel = ( getLinkDestinations().find( @@ -249,6 +252,65 @@ const ImageURLInputUI = ( { ) || {} ).title; + const PopoverChildren = () => { + if ( + lightboxEnabled && + showLightboxSetting && + ! url && + ! isEditingLink + ) { + return ( +
+ +
+

{ __( 'Expand on click' ) }

+

+ { __( 'Scales the image with a lightbox effect' ) } +

+
+
+ ); + } else if ( ! url || isEditingLink ) { + return ( + + ); + } else if ( url && ! isEditingLink ) { + return ( + <> + +