@wordpress/block-library 8.35.0 → 9.0.0

package/build-module/image/image.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -30,6 +29,9 @@ import { Caption } from '../utils/caption';
 import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 import { evalAspectRatio } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const {
   DimensionsTool,
   ResolutionTool
@@ -52,7 +54,7 @@ const ImageWrapper = ({
   if (!href) {
     return children;
   }
-  return createElement("a", {
+  return /*#__PURE__*/_jsx("a", {
     href: href,
     onClick: event => event.preventDefault(),
     "aria-disabled": true,
@@ -64,8 +66,9 @@ const ImageWrapper = ({
       pointerEvents: 'none',
       cursor: 'default',
       display: 'inline'
-    }
-  }, children);
+    },
+    children: children
+  });
 };
 export default function Image({
   temporaryURL,
@@ -324,7 +327,7 @@ export default function Image({
   // remove that override, even if the lightbox UI is disabled in the settings.
   !!lightbox && lightbox?.enabled !== lightboxSetting?.enabled || lightboxSetting?.allowEditing;
   const lightboxChecked = !!lightbox?.enabled || !lightbox && !!lightboxSetting?.enabled;
-  const dimensionsControl = createElement(DimensionsTool, {
+  const dimensionsControl = /*#__PURE__*/_jsx(DimensionsTool, {
     value: {
       width,
       height,
@@ -366,11 +369,14 @@ export default function Image({
       lightbox: undefined
     });
   };
-  const sizeControls = createElement(InspectorControls, null, createElement(ToolsPanel, {
-    label: __('Settings'),
-    resetAll: resetAll,
-    dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS
-  }, isResizable && dimensionsControl));
+  const sizeControls = /*#__PURE__*/_jsx(InspectorControls, {
+    children: /*#__PURE__*/_jsx(ToolsPanel, {
+      label: __('Settings'),
+      resetAll: resetAll,
+      dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS,
+      children: isResizable && dimensionsControl
+    })
+  });
   const {
     lockUrlControls = false,
     lockHrefControls = false,
@@ -399,7 +405,11 @@ export default function Image({
     const altBindingSource = getBlockBindingsSource(altBinding?.source);
     const titleBindingSource = getBlockBindingsSource(titleBinding?.source);
     return {
-      lockUrlControls: !!urlBinding && (!urlBindingSource || urlBindingSource?.lockAttributesEditing),
+      lockUrlControls: !!urlBinding && !urlBindingSource?.canUserEditValue({
+        select,
+        context,
+        args: urlBinding?.args
+      }),
       lockHrefControls:
       // Disable editing the link of the URL if the image is inside a pattern instance.
       // This is a temporary solution until we support overriding the link on the frontend.
@@ -408,152 +418,204 @@ export default function Image({
       // Disable editing the caption if the image is inside a pattern instance.
       // This is a temporary solution until we support overriding the caption on the frontend.
       hasParentPattern,
-      lockAltControls: !!altBinding && (!altBindingSource || altBindingSource?.lockAttributesEditing),
+      lockAltControls: !!altBinding && !altBindingSource?.canUserEditValue({
+        select,
+        context,
+        args: altBinding?.args
+      }),
       lockAltControlsMessage: altBindingSource?.label ? sprintf( /* translators: %s: Label of the bindings source. */
       __('Connected to %s'), altBindingSource.label) : __('Connected to dynamic data'),
-      lockTitleControls: !!titleBinding && (!titleBindingSource || titleBindingSource?.lockAttributesEditing),
+      lockTitleControls: !!titleBinding && !titleBindingSource?.canUserEditValue({
+        select,
+        context,
+        args: titleBinding?.args
+      }),
       lockTitleControlsMessage: titleBindingSource?.label ? sprintf( /* translators: %s: Label of the bindings source. */
       __('Connected to %s'), titleBindingSource.label) : __('Connected to dynamic data')
     };
   }, [clientId, isSingleSelected, metadata?.bindings]);
-  const controls = createElement(Fragment, null, createElement(BlockControls, {
-    group: "block"
-  }, isSingleSelected && !isEditingImage && !lockHrefControls && !lockUrlControls && createElement(ImageURLInputUI, {
-    url: href || '',
-    onChangeUrl: onSetHref,
-    linkDestination: linkDestination,
-    mediaUrl: image && image.source_url || url,
-    mediaLink: image && image.link,
-    linkTarget: linkTarget,
-    linkClass: linkClass,
-    rel: rel,
-    showLightboxSetting: showLightboxSetting,
-    lightboxEnabled: lightboxChecked,
-    onSetLightbox: onSetLightbox,
-    resetLightbox: resetLightbox
-  }), allowCrop && createElement(ToolbarButton, {
-    onClick: () => setIsEditingImage(true),
-    icon: crop,
-    label: __('Crop')
-  }), isSingleSelected && canInsertCover && createElement(ToolbarButton, {
-    icon: overlayText,
-    label: __('Add text over image'),
-    onClick: switchToCover
-  })), isSingleSelected && !isEditingImage && !lockUrlControls && createElement(BlockControls, {
-    group: "other"
-  }, createElement(MediaReplaceFlow, {
-    mediaId: id,
-    mediaURL: url,
-    allowedTypes: ALLOWED_MEDIA_TYPES,
-    accept: "image/*",
-    onSelect: onSelectImage,
-    onSelectURL: onSelectURL,
-    onError: onUploadError
-  })), isSingleSelected && externalBlob && createElement(BlockControls, null, createElement(ToolbarGroup, null, createElement(ToolbarButton, {
-    onClick: uploadExternal,
-    icon: upload,
-    label: __('Upload to Media Library')
-  }))), isContentOnlyMode &&
-  // Add some extra controls for content attributes when content only mode is active.
-  // With content only mode active, the inspector is hidden, so users need another way
-  // to edit these attributes.
-  createElement(BlockControls, {
-    group: "other"
-  }, createElement(Dropdown, {
-    popoverProps: {
-      position: 'bottom right'
-    },
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => createElement(ToolbarButton, {
-      onClick: onToggle,
-      "aria-haspopup": "true",
-      "aria-expanded": isOpen,
-      onKeyDown: event => {
-        if (!isOpen && event.keyCode === DOWN) {
-          event.preventDefault();
-          onToggle();
-        }
-      }
-    }, _x('Alt', 'Alternative text for an image. Block toolbar label, a low character count is preferred.')),
-    renderContent: () => createElement(TextareaControl, {
-      className: "wp-block-image__toolbar_content_textarea",
-      label: __('Alternative text'),
-      value: alt || '',
-      onChange: updateAlt,
-      disabled: lockAltControls,
-      help: lockAltControls ? createElement(Fragment, null, lockAltControlsMessage) : createElement(Fragment, null, createElement(ExternalLink, {
-        href: "https://www.w3.org/WAI/tutorials/images/decision-tree"
-      }, __('Describe the purpose of the image.')), createElement("br", null), __('Leave empty if decorative.')),
-      __nextHasNoMarginBottom: true
-    })
-  }), createElement(Dropdown, {
-    popoverProps: {
-      position: 'bottom right'
-    },
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => createElement(ToolbarButton, {
-      onClick: onToggle,
-      "aria-haspopup": "true",
-      "aria-expanded": isOpen,
-      onKeyDown: event => {
-        if (!isOpen && event.keyCode === DOWN) {
-          event.preventDefault();
-          onToggle();
-        }
-      }
-    }, __('Title')),
-    renderContent: () => createElement(TextControl, {
-      className: "wp-block-image__toolbar_content_textarea",
-      __nextHasNoMarginBottom: true,
-      label: __('Title attribute'),
-      value: title || '',
-      onChange: onSetTitle,
-      disabled: lockTitleControls,
-      help: lockTitleControls ? createElement(Fragment, null, lockTitleControlsMessage) : createElement(Fragment, null, __('Describe the role of this image on the page.'), createElement(ExternalLink, {
-        href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute"
-      }, __('(Note: many devices and browsers do not display this text.)')))
-    })
-  })), createElement(InspectorControls, null, createElement(ToolsPanel, {
-    label: __('Settings'),
-    resetAll: resetAll,
-    dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS
-  }, isSingleSelected && createElement(ToolsPanelItem, {
-    label: __('Alternative text'),
-    isShownByDefault: true,
-    hasValue: () => !!alt,
-    onDeselect: () => setAttributes({
-      alt: undefined
-    })
-  }, createElement(TextareaControl, {
-    label: __('Alternative text'),
-    value: alt || '',
-    onChange: updateAlt,
-    readOnly: lockAltControls,
-    help: lockAltControls ? createElement(Fragment, null, lockAltControlsMessage) : createElement(Fragment, null, createElement(ExternalLink, {
-      href: "https://www.w3.org/WAI/tutorials/images/decision-tree"
-    }, __('Describe the purpose of the image.')), createElement("br", null), __('Leave empty if decorative.')),
-    __nextHasNoMarginBottom: true
-  })), isResizable && dimensionsControl, !!imageSizeOptions.length && createElement(ResolutionTool, {
-    value: sizeSlug,
-    onChange: updateImage,
-    options: imageSizeOptions
-  }))), createElement(InspectorControls, {
-    group: "advanced"
-  }, createElement(TextControl, {
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    label: __('Title attribute'),
-    value: title || '',
-    onChange: onSetTitle,
-    readOnly: lockTitleControls,
-    help: lockTitleControls ? createElement(Fragment, null, lockTitleControlsMessage) : createElement(Fragment, null, __('Describe the role of this image on the page.'), createElement(ExternalLink, {
-      href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute"
-    }, __('(Note: many devices and browsers do not display this text.)')))
-  })));
+  const showUrlInput = isSingleSelected && !isEditingImage && !lockHrefControls && !lockUrlControls;
+  const showCoverControls = isSingleSelected && canInsertCover;
+  const showBlockControls = showUrlInput || allowCrop || showCoverControls;
+  const controls = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showBlockControls && /*#__PURE__*/_jsxs(BlockControls, {
+      group: "block",
+      children: [showUrlInput && /*#__PURE__*/_jsx(ImageURLInputUI, {
+        url: href || '',
+        onChangeUrl: onSetHref,
+        linkDestination: linkDestination,
+        mediaUrl: image && image.source_url || url,
+        mediaLink: image && image.link,
+        linkTarget: linkTarget,
+        linkClass: linkClass,
+        rel: rel,
+        showLightboxSetting: showLightboxSetting,
+        lightboxEnabled: lightboxChecked,
+        onSetLightbox: onSetLightbox,
+        resetLightbox: resetLightbox
+      }), allowCrop && /*#__PURE__*/_jsx(ToolbarButton, {
+        onClick: () => setIsEditingImage(true),
+        icon: crop,
+        label: __('Crop')
+      }), showCoverControls && /*#__PURE__*/_jsx(ToolbarButton, {
+        icon: overlayText,
+        label: __('Add text over image'),
+        onClick: switchToCover
+      })]
+    }), isSingleSelected && !isEditingImage && !lockUrlControls && /*#__PURE__*/_jsx(BlockControls, {
+      group: "other",
+      children: /*#__PURE__*/_jsx(MediaReplaceFlow, {
+        mediaId: id,
+        mediaURL: url,
+        allowedTypes: ALLOWED_MEDIA_TYPES,
+        accept: "image/*",
+        onSelect: onSelectImage,
+        onSelectURL: onSelectURL,
+        onError: onUploadError
+      })
+    }), isSingleSelected && externalBlob && /*#__PURE__*/_jsx(BlockControls, {
+      children: /*#__PURE__*/_jsx(ToolbarGroup, {
+        children: /*#__PURE__*/_jsx(ToolbarButton, {
+          onClick: uploadExternal,
+          icon: upload,
+          label: __('Upload to Media Library')
+        })
+      })
+    }), isContentOnlyMode &&
+    /*#__PURE__*/
+    // Add some extra controls for content attributes when content only mode is active.
+    // With content only mode active, the inspector is hidden, so users need another way
+    // to edit these attributes.
+    _jsxs(BlockControls, {
+      group: "other",
+      children: [/*#__PURE__*/_jsx(Dropdown, {
+        popoverProps: {
+          position: 'bottom right'
+        },
+        renderToggle: ({
+          isOpen,
+          onToggle
+        }) => /*#__PURE__*/_jsx(ToolbarButton, {
+          onClick: onToggle,
+          "aria-haspopup": "true",
+          "aria-expanded": isOpen,
+          onKeyDown: event => {
+            if (!isOpen && event.keyCode === DOWN) {
+              event.preventDefault();
+              onToggle();
+            }
+          },
+          children: _x('Alt', 'Alternative text for an image. Block toolbar label, a low character count is preferred.')
+        }),
+        renderContent: () => /*#__PURE__*/_jsx(TextareaControl, {
+          className: "wp-block-image__toolbar_content_textarea",
+          label: __('Alternative text'),
+          value: alt || '',
+          onChange: updateAlt,
+          disabled: lockAltControls,
+          help: lockAltControls ? /*#__PURE__*/_jsx(_Fragment, {
+            children: lockAltControlsMessage
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(ExternalLink, {
+              href:
+              // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+              __('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
+              children: __('Describe the purpose of the image.')
+            }), /*#__PURE__*/_jsx("br", {}), __('Leave empty if decorative.')]
+          }),
+          __nextHasNoMarginBottom: true
+        })
+      }), /*#__PURE__*/_jsx(Dropdown, {
+        popoverProps: {
+          position: 'bottom right'
+        },
+        renderToggle: ({
+          isOpen,
+          onToggle
+        }) => /*#__PURE__*/_jsx(ToolbarButton, {
+          onClick: onToggle,
+          "aria-haspopup": "true",
+          "aria-expanded": isOpen,
+          onKeyDown: event => {
+            if (!isOpen && event.keyCode === DOWN) {
+              event.preventDefault();
+              onToggle();
+            }
+          },
+          children: __('Title')
+        }),
+        renderContent: () => /*#__PURE__*/_jsx(TextControl, {
+          className: "wp-block-image__toolbar_content_textarea",
+          __nextHasNoMarginBottom: true,
+          label: __('Title attribute'),
+          value: title || '',
+          onChange: onSetTitle,
+          disabled: lockTitleControls,
+          help: lockTitleControls ? /*#__PURE__*/_jsx(_Fragment, {
+            children: lockTitleControlsMessage
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [__('Describe the role of this image on the page.'), /*#__PURE__*/_jsx(ExternalLink, {
+              href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute",
+              children: __('(Note: many devices and browsers do not display this text.)')
+            })]
+          })
+        })
+      })]
+    }), /*#__PURE__*/_jsx(InspectorControls, {
+      children: /*#__PURE__*/_jsxs(ToolsPanel, {
+        label: __('Settings'),
+        resetAll: resetAll,
+        dropdownMenuProps: TOOLSPANEL_DROPDOWNMENU_PROPS,
+        children: [isSingleSelected && /*#__PURE__*/_jsx(ToolsPanelItem, {
+          label: __('Alternative text'),
+          isShownByDefault: true,
+          hasValue: () => !!alt,
+          onDeselect: () => setAttributes({
+            alt: undefined
+          }),
+          children: /*#__PURE__*/_jsx(TextareaControl, {
+            label: __('Alternative text'),
+            value: alt || '',
+            onChange: updateAlt,
+            readOnly: lockAltControls,
+            help: lockAltControls ? /*#__PURE__*/_jsx(_Fragment, {
+              children: lockAltControlsMessage
+            }) : /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(ExternalLink, {
+                href:
+                // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+                __('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
+                children: __('Describe the purpose of the image.')
+              }), /*#__PURE__*/_jsx("br", {}), __('Leave empty if decorative.')]
+            }),
+            __nextHasNoMarginBottom: true
+          })
+        }), isResizable && dimensionsControl, !!imageSizeOptions.length && /*#__PURE__*/_jsx(ResolutionTool, {
+          value: sizeSlug,
+          onChange: updateImage,
+          options: imageSizeOptions
+        })]
+      })
+    }), /*#__PURE__*/_jsx(InspectorControls, {
+      group: "advanced",
+      children: /*#__PURE__*/_jsx(TextControl, {
+        __nextHasNoMarginBottom: true,
+        __next40pxDefaultSize: true,
+        label: __('Title attribute'),
+        value: title || '',
+        onChange: onSetTitle,
+        readOnly: lockTitleControls,
+        help: lockTitleControls ? /*#__PURE__*/_jsx(_Fragment, {
+          children: lockTitleControlsMessage
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [__('Describe the role of this image on the page.'), /*#__PURE__*/_jsx(ExternalLink, {
+            href: "https://www.w3.org/TR/html52/dom.html#the-title-attribute",
+            children: __('(Note: many devices and browsers do not display this text.)')
+          })]
+        })
+      })
+    })]
+  });
   const filename = getFilename(url);
   let defaultedAlt;
   if (alt) {
@@ -568,56 +630,62 @@ export default function Image({
   const shadowProps = getShadowClassesAndStyles(attributes);
   const isRounded = attributes.className?.includes('is-style-rounded');
   let img =
+  /*#__PURE__*/
   // Disable reason: Image itself is not meant to be interactive, but
   // should direct focus to block.
   /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-  createElement(Fragment, null, createElement("img", {
-    src: temporaryURL || url,
-    alt: defaultedAlt,
-    onError: () => onImageError(),
-    onLoad: event => {
-      setLoadedNaturalSize({
-        loadedNaturalWidth: event.target?.naturalWidth,
-        loadedNaturalHeight: event.target?.naturalHeight
-      });
-    },
-    ref: imageRef,
-    className: borderProps.className,
-    style: {
-      width: width && height || aspectRatio ? '100%' : undefined,
-      height: width && height || aspectRatio ? '100%' : undefined,
-      objectFit: scale,
-      ...borderProps.style,
-      ...shadowProps.style
-    }
-  }), temporaryURL && createElement(Spinner, null))
+  _jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("img", {
+      src: temporaryURL || url,
+      alt: defaultedAlt,
+      onError: () => onImageError(),
+      onLoad: event => {
+        setLoadedNaturalSize({
+          loadedNaturalWidth: event.target?.naturalWidth,
+          loadedNaturalHeight: event.target?.naturalHeight
+        });
+      },
+      ref: imageRef,
+      className: borderProps.className,
+      style: {
+        width: width && height || aspectRatio ? '100%' : undefined,
+        height: width && height || aspectRatio ? '100%' : undefined,
+        objectFit: scale,
+        ...borderProps.style,
+        ...shadowProps.style
+      }
+    }), temporaryURL && /*#__PURE__*/_jsx(Spinner, {})]
+  })
   /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */;
   if (canEditImage && isEditingImage) {
-    img = createElement(ImageWrapper, {
-      href: href
-    }, createElement(ImageEditor, {
-      id: id,
-      url: url,
-      width: numericWidth,
-      height: numericHeight,
-      naturalHeight: naturalHeight,
-      naturalWidth: naturalWidth,
-      onSaveImage: imageAttributes => setAttributes(imageAttributes),
-      onFinishEditing: () => {
-        setIsEditingImage(false);
-      },
-      borderProps: isRounded ? undefined : borderProps
-    }));
+    img = /*#__PURE__*/_jsx(ImageWrapper, {
+      href: href,
+      children: /*#__PURE__*/_jsx(ImageEditor, {
+        id: id,
+        url: url,
+        width: numericWidth,
+        height: numericHeight,
+        naturalHeight: naturalHeight,
+        naturalWidth: naturalWidth,
+        onSaveImage: imageAttributes => setAttributes(imageAttributes),
+        onFinishEditing: () => {
+          setIsEditingImage(false);
+        },
+        borderProps: isRounded ? undefined : borderProps
+      })
+    });
   } else if (!isResizable) {
-    img = createElement("div", {
+    img = /*#__PURE__*/_jsx("div", {
       style: {
         width,
         height,
         aspectRatio
-      }
-    }, createElement(ImageWrapper, {
-      href: href
-    }, img));
+      },
+      children: /*#__PURE__*/_jsx(ImageWrapper, {
+        href: href,
+        children: img
+      })
+    });
   } else {
     const numericRatio = aspectRatio && evalAspectRatio(aspectRatio);
     const customRatio = numericWidth / numericHeight;
@@ -666,7 +734,7 @@ export default function Image({
       }
     }
     /* eslint-enable no-lonely-if */
-    img = createElement(ResizableBox, {
+    img = /*#__PURE__*/_jsx(ResizableBox, {
       style: {
         display: 'block',
         objectFit: scale,
@@ -701,23 +769,27 @@ export default function Image({
           aspectRatio: ratio === naturalRatio ? undefined : String(ratio)
         });
       },
-      resizeRatio: align === 'center' ? 2 : 1
-    }, createElement(ImageWrapper, {
-      href: href
-    }, img));
+      resizeRatio: align === 'center' ? 2 : 1,
+      children: /*#__PURE__*/_jsx(ImageWrapper, {
+        href: href,
+        children: img
+      })
+    });
   }
   if (!url && !temporaryURL) {
     // Add all controls if the image attributes are connected.
     return metadata?.bindings ? controls : sizeControls;
   }
-  return createElement(Fragment, null, controls, img, createElement(Caption, {
-    attributes: attributes,
-    setAttributes: setAttributes,
-    isSelected: isSingleSelected,
-    insertBlocksAfter: insertBlocksAfter,
-    label: __('Image caption text'),
-    showToolbarButton: isSingleSelected && hasNonContentControls,
-    readOnly: lockCaption
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [controls, img, /*#__PURE__*/_jsx(Caption, {
+      attributes: attributes,
+      setAttributes: setAttributes,
+      isSelected: isSingleSelected,
+      insertBlocksAfter: insertBlocksAfter,
+      label: __('Image caption text'),
+      showToolbarButton: isSingleSelected && hasNonContentControls,
+      readOnly: lockCaption
+    })]
+  });
 }
 //# sourceMappingURL=image.js.map