@wordpress/block-library 8.35.0 → 9.0.0

package/build/site-logo/edit.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LogoEdit;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _blob = require("@wordpress/blob");
 var _element = require("@wordpress/element");
@@ -18,6 +17,7 @@ var _coreData = require("@wordpress/core-data");
 var _icons = require("@wordpress/icons");
 var _notices = require("@wordpress/notices");
 var _constants = require("../image/constants");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -63,7 +63,6 @@ const SiteLogo = ({
   const {
     toggleSelection
   } = (0, _data.useDispatch)(_blockEditor.store);
-  const classes = (0, _clsx.default)('custom-logo-link');
   const {
     imageEditing,
     maxWidth,
@@ -98,39 +97,45 @@ const SiteLogo = ({
   function onResizeStop() {
     toggleSelection(true);
   }
-  const img = (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("img", {
-    className: "custom-logo",
-    src: logoUrl,
-    alt: alt,
-    onLoad: event => {
-      setNaturalSize({
-        naturalWidth: event.target.naturalWidth,
-        naturalHeight: event.target.naturalHeight
-      });
-    }
-  }), (0, _blob.isBlobURL)(logoUrl) && (0, _react.createElement)(_components.Spinner, null));
+  const img = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      className: "custom-logo",
+      src: logoUrl,
+      alt: alt,
+      onLoad: event => {
+        setNaturalSize({
+          naturalWidth: event.target.naturalWidth,
+          naturalHeight: event.target.naturalHeight
+        });
+      }
+    }), (0, _blob.isBlobURL)(logoUrl) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})]
+  });
   let imgWrapper = img;
 
   // Disable reason: Image itself is not meant to be interactive, but
   // should direct focus to block.
   if (isLink) {
-    imgWrapper = /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
-    (0, _react.createElement)("a", {
+    imgWrapper =
+    /*#__PURE__*/
+    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+    (0, _jsxRuntime.jsx)("a", {
       href: siteUrl,
-      className: classes,
+      className: "custom-logo-link",
       rel: "home",
       title: title,
-      onClick: event => event.preventDefault()
-    }, img)
+      onClick: event => event.preventDefault(),
+      children: img
+    })
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */;
   }
   if (!isResizable || !naturalWidth || !naturalHeight) {
-    return (0, _react.createElement)("div", {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         width,
         height
-      }
-    }, imgWrapper);
+      },
+      children: imgWrapper
+    });
   }
 
   // Set the default width to a responsible size.
@@ -182,7 +187,7 @@ const SiteLogo = ({
   /* eslint-enable no-lonely-if */
 
   const canEditImage = logoId && naturalWidth && naturalHeight && imageEditing;
-  const imgEdit = canEditImage && isEditingImage ? (0, _react.createElement)(_blockEditor.__experimentalImageEditor, {
+  const imgEdit = canEditImage && isEditingImage ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalImageEditor, {
     id: logoId,
     url: logoUrl,
     width: currentWidth,
@@ -195,7 +200,7 @@ const SiteLogo = ({
     onFinishEditing: () => {
       setIsEditingImage(false);
     }
-  }) : (0, _react.createElement)(_components.ResizableBox, {
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, {
     size: {
       width: currentWidth,
       height: currentHeight
@@ -219,8 +224,9 @@ const SiteLogo = ({
         width: parseInt(currentWidth + delta.width, 10),
         height: parseInt(currentHeight + delta.height, 10)
       });
-    }
-  }, imgWrapper);
+    },
+    children: imgWrapper
+  });
 
   // Support the previous location for the Site Icon settings. To be removed
   // when the required WP core version for Gutenberg is >= 6.5.0.
@@ -228,59 +234,70 @@ const SiteLogo = ({
   const siteIconSettingsUrl = shouldUseNewUrl ? siteUrl + '/wp-admin/options-general.php' : siteUrl + '/wp-admin/customize.php?autofocus[section]=title_tagline';
   const syncSiteIconHelpText = (0, _element.createInterpolateElement)((0, _i18n.__)('Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'), {
     a:
+    /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-has-content
-    (0, _react.createElement)("a", {
+    (0, _jsxRuntime.jsx)("a", {
       href: siteIconSettingsUrl,
       target: "_blank",
       rel: "noopener noreferrer"
     })
   });
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_blockEditor.InspectorControls, null, (0, _react.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Settings')
-  }, (0, _react.createElement)(_components.RangeControl, {
-    __nextHasNoMarginBottom: true,
-    __next40pxDefaultSize: true,
-    label: (0, _i18n.__)('Image width'),
-    onChange: newWidth => setAttributes({
-      width: newWidth
-    }),
-    min: minWidth,
-    max: maxWidthBuffer,
-    initialPosition: Math.min(defaultWidth, maxWidthBuffer),
-    value: width || '',
-    disabled: !isResizable
-  }), (0, _react.createElement)(_components.ToggleControl, {
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Link image to home'),
-    onChange: () => setAttributes({
-      isLink: !isLink
-    }),
-    checked: isLink
-  }), isLink && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.ToggleControl, {
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Open in new tab'),
-    onChange: value => setAttributes({
-      linkTarget: value ? '_blank' : '_self'
-    }),
-    checked: linkTarget === '_blank'
-  })), canUserEdit && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.ToggleControl, {
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Use as Site Icon'),
-    onChange: value => {
-      setAttributes({
-        shouldSyncIcon: value
-      });
-      setIcon(value ? logoId : undefined);
-    },
-    checked: !!shouldSyncIcon,
-    help: syncSiteIconHelpText
-  })))), (0, _react.createElement)(_blockEditor.BlockControls, {
-    group: "block"
-  }, canEditImage && !isEditingImage && (0, _react.createElement)(_components.ToolbarButton, {
-    onClick: () => setIsEditingImage(true),
-    icon: _icons.crop,
-    label: (0, _i18n.__)('Crop')
-  })), imgEdit);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
+        title: (0, _i18n.__)('Settings'),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+          __nextHasNoMarginBottom: true,
+          __next40pxDefaultSize: true,
+          label: (0, _i18n.__)('Image width'),
+          onChange: newWidth => setAttributes({
+            width: newWidth
+          }),
+          min: minWidth,
+          max: maxWidthBuffer,
+          initialPosition: Math.min(defaultWidth, maxWidthBuffer),
+          value: width || '',
+          disabled: !isResizable
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+          __nextHasNoMarginBottom: true,
+          label: (0, _i18n.__)('Link image to home'),
+          onChange: () => setAttributes({
+            isLink: !isLink
+          }),
+          checked: isLink
+        }), isLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+            __nextHasNoMarginBottom: true,
+            label: (0, _i18n.__)('Open in new tab'),
+            onChange: value => setAttributes({
+              linkTarget: value ? '_blank' : '_self'
+            }),
+            checked: linkTarget === '_blank'
+          })
+        }), canUserEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+            __nextHasNoMarginBottom: true,
+            label: (0, _i18n.__)('Use as Site Icon'),
+            onChange: value => {
+              setAttributes({
+                shouldSyncIcon: value
+              });
+              setIcon(value ? logoId : undefined);
+            },
+            checked: !!shouldSyncIcon,
+            help: syncSiteIconHelpText
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
+      group: "block",
+      children: canEditImage && !isEditingImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
+        onClick: () => setIsEditingImage(true),
+        icon: _icons.crop,
+        label: (0, _i18n.__)('Crop')
+      })
+    }), imgEdit]
+  });
 };
 
 // This is a light wrapper around MediaReplaceFlow because the block has two
@@ -289,13 +306,15 @@ function SiteLogoReplaceFlow({
   onRemoveLogo,
   ...mediaReplaceProps
 }) {
-  return (0, _react.createElement)(_blockEditor.MediaReplaceFlow, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, {
     ...mediaReplaceProps,
     allowedTypes: ALLOWED_MEDIA_TYPES,
-    accept: ACCEPT_MEDIA_STRING
-  }, (0, _react.createElement)(_components.MenuItem, {
-    onClick: onRemoveLogo
-  }, (0, _i18n.__)('Reset')));
+    accept: ACCEPT_MEDIA_STRING,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
+      onClick: onRemoveLogo,
+      children: (0, _i18n.__)('Reset')
+    })
+  });
 }
 const InspectorLogoPreview = ({
   mediaItemData = {},
@@ -308,21 +327,25 @@ const InspectorLogoPreview = ({
     media_details: logoMediaDetails
   } = mediaItemData;
   const logoLabel = logoMediaDetails?.sizes?.full?.file || logoSlug;
-  return (0, _react.createElement)(_components.__experimentalItemGroup, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
     ...itemGroupProps,
-    as: "span"
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "flex-start",
-    as: "span"
-  }, (0, _react.createElement)("img", {
-    src: logoUrl,
-    alt: alt
-  }), (0, _react.createElement)(_components.FlexItem, {
-    as: "span"
-  }, (0, _react.createElement)(_components.__experimentalTruncate, {
-    numberOfLines: 1,
-    className: "block-library-site-logo__inspector-media-replace-title"
-  }, logoLabel))));
+    as: "span",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      justify: "flex-start",
+      as: "span",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: logoUrl,
+        alt: alt
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        as: "span",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
+          numberOfLines: 1,
+          className: "block-library-site-logo__inspector-media-replace-title",
+          children: logoLabel
+        })
+      })]
+    })
+  });
 };
 function LogoEdit({
   attributes,
@@ -456,15 +479,16 @@ function LogoEdit({
     onError: onUploadError,
     onRemoveLogo
   };
-  const controls = canUserEdit && logoUrl && !temporaryURL && (0, _react.createElement)(_blockEditor.BlockControls, {
-    group: "other"
-  }, (0, _react.createElement)(SiteLogoReplaceFlow, {
-    ...mediaReplaceFlowProps
-  }));
+  const controls = canUserEdit && logoUrl && !temporaryURL && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
+    group: "other",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SiteLogoReplaceFlow, {
+      ...mediaReplaceFlowProps
+    })
+  });
   let logoImage;
   const isLoading = siteLogoId === undefined || isRequestingMediaItem;
   if (isLoading) {
-    logoImage = (0, _react.createElement)(_components.Spinner, null);
+    logoImage = /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {});
   }
 
   // Reset temporary url when logoUrl is available.
@@ -474,31 +498,34 @@ function LogoEdit({
     }
   }, [logoUrl, temporaryURL]);
   if (!!logoUrl || !!temporaryURL) {
-    logoImage = (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(SiteLogo, {
-      alt: alt,
-      attributes: attributes,
-      className: className,
-      isSelected: isSelected,
-      setAttributes: setAttributes,
-      logoUrl: temporaryURL || logoUrl,
-      setLogo: setLogo,
-      logoId: mediaItemData?.id || siteLogoId,
-      siteUrl: url,
-      setIcon: setIcon,
-      iconId: siteIconId,
-      canUserEdit: canUserEdit
-    }));
+    logoImage = /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SiteLogo, {
+        alt: alt,
+        attributes: attributes,
+        className: className,
+        isSelected: isSelected,
+        setAttributes: setAttributes,
+        logoUrl: temporaryURL || logoUrl,
+        setLogo: setLogo,
+        logoId: mediaItemData?.id || siteLogoId,
+        siteUrl: url,
+        setIcon: setIcon,
+        iconId: siteIconId,
+        canUserEdit: canUserEdit
+      })
+    });
   }
   const placeholder = content => {
     const placeholderClassName = (0, _clsx.default)('block-editor-media-placeholder', className);
-    return (0, _react.createElement)(_components.Placeholder, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
       className: placeholderClassName,
       preview: logoImage,
       withIllustration: true,
       style: {
         width
-      }
-    }, content);
+      },
+      children: content
+    });
   };
   const classes = (0, _clsx.default)(className, {
     'is-default-size': !width,
@@ -508,62 +535,73 @@ function LogoEdit({
     className: classes
   });
   const label = (0, _i18n.__)('Add a site logo');
-  const mediaInspectorPanel = (canUserEdit || logoUrl) && (0, _react.createElement)(_blockEditor.InspectorControls, null, (0, _react.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Media')
-  }, (0, _react.createElement)("div", {
-    className: "block-library-site-logo__inspector-media-replace-container"
-  }, !canUserEdit && !!logoUrl && (0, _react.createElement)(InspectorLogoPreview, {
-    mediaItemData: mediaItemData,
-    itemGroupProps: {
-      isBordered: true,
-      className: 'block-library-site-logo__inspector-readonly-logo-preview'
-    }
-  }), canUserEdit && !!logoUrl && (0, _react.createElement)(SiteLogoReplaceFlow, {
-    ...mediaReplaceFlowProps,
-    name: (0, _react.createElement)(InspectorLogoPreview, {
-      mediaItemData: mediaItemData
-    }),
-    popoverProps: {}
-  }), canUserEdit && !logoUrl && (0, _react.createElement)(_blockEditor.MediaUploadCheck, null, (0, _react.createElement)(_blockEditor.MediaUpload, {
-    onSelect: onInitialSelectLogo,
-    allowedTypes: ALLOWED_MEDIA_TYPES,
-    render: ({
-      open
-    }) => (0, _react.createElement)("div", {
-      className: "block-library-site-logo__inspector-upload-container"
-    }, (0, _react.createElement)(_components.Button, {
-      onClick: open,
-      variant: "secondary"
-    }, isLoading ? (0, _react.createElement)(_components.Spinner, null) : (0, _i18n.__)('Add media')), (0, _react.createElement)(_components.DropZone, {
-      onFilesDrop: onFilesDrop
-    }))
-  })))));
-  return (0, _react.createElement)("div", {
-    ...blockProps
-  }, controls, mediaInspectorPanel, (!!logoUrl || !!temporaryURL) && logoImage, !temporaryURL && !logoUrl && !canUserEdit && (0, _react.createElement)(_components.Placeholder, {
-    className: "site-logo_placeholder"
-  }, !!isLoading && (0, _react.createElement)("span", {
-    className: "components-placeholder__preview"
-  }, (0, _react.createElement)(_components.Spinner, null))), !temporaryURL && !logoUrl && canUserEdit && (0, _react.createElement)(_blockEditor.MediaPlaceholder, {
-    onSelect: onInitialSelectLogo,
-    accept: ACCEPT_MEDIA_STRING,
-    allowedTypes: ALLOWED_MEDIA_TYPES,
-    onError: onUploadError,
-    placeholder: placeholder,
-    mediaLibraryButton: ({
-      open
-    }) => {
-      return (0, _react.createElement)(_components.Button, {
-        icon: _icons.upload,
-        variant: "primary",
-        label: label,
-        showTooltip: true,
-        tooltipPosition: "top center",
-        onClick: () => {
-          open();
-        }
-      });
-    }
-  }));
+  const mediaInspectorPanel = (canUserEdit || logoUrl) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
+      title: (0, _i18n.__)('Media'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "block-library-site-logo__inspector-media-replace-container",
+        children: [!canUserEdit && !!logoUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)(InspectorLogoPreview, {
+          mediaItemData: mediaItemData,
+          itemGroupProps: {
+            isBordered: true,
+            className: 'block-library-site-logo__inspector-readonly-logo-preview'
+          }
+        }), canUserEdit && !!logoUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)(SiteLogoReplaceFlow, {
+          ...mediaReplaceFlowProps,
+          name: /*#__PURE__*/(0, _jsxRuntime.jsx)(InspectorLogoPreview, {
+            mediaItemData: mediaItemData
+          }),
+          popoverProps: {}
+        }), canUserEdit && !logoUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadCheck, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
+            onSelect: onInitialSelectLogo,
+            allowedTypes: ALLOWED_MEDIA_TYPES,
+            render: ({
+              open
+            }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: "block-library-site-logo__inspector-upload-container",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+                onClick: open,
+                variant: "secondary",
+                children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}) : (0, _i18n.__)('Add media')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropZone, {
+                onFilesDrop: onFilesDrop
+              })]
+            })
+          })
+        })]
+      })
+    })
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ...blockProps,
+    children: [controls, mediaInspectorPanel, (!!logoUrl || !!temporaryURL) && logoImage, !temporaryURL && !logoUrl && !canUserEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, {
+      className: "site-logo_placeholder",
+      children: !!isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "components-placeholder__preview",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
+      })
+    }), !temporaryURL && !logoUrl && canUserEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
+      onSelect: onInitialSelectLogo,
+      accept: ACCEPT_MEDIA_STRING,
+      allowedTypes: ALLOWED_MEDIA_TYPES,
+      onError: onUploadError,
+      placeholder: placeholder,
+      mediaLibraryButton: ({
+        open
+      }) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          icon: _icons.upload,
+          variant: "primary",
+          label: label,
+          showTooltip: true,
+          tooltipPosition: "top center",
+          onClick: () => {
+            open();
+          }
+        });
+      }
+    })]
+  });
 }
 //# sourceMappingURL=edit.js.map