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 (
+ <>
+
+