@wordpress/block-library 8.35.0 → 9.0.0

package/build-module/image/edit.native.js

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -29,6 +28,9 @@ import { store as editPostStore } from '@wordpress/edit-post';
 import styles from './styles.scss';
 import { getUpdatedLinkTargetSettings } from './utils';
 import { LINK_DESTINATION_NONE, LINK_DESTINATION_CUSTOM, LINK_DESTINATION_ATTACHMENT, LINK_DESTINATION_MEDIA, MEDIA_ID_NO_FEATURED_IMAGE_SET } from './constants';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getUrlForSlug = (image, sizeSlug) => {
   if (!sizeSlug) {
     return undefined;
@@ -104,30 +106,31 @@ function LinkSettings({
       placeholder: _x('None', 'Link rel attribute value placeholder')
     }
   };
-  return createElement(PanelBody, {
-    title: __('Link Settings')
-  }, createElement(LinkSettingsNavigation, {
-    isVisible: isLinkSheetVisible,
-    url: url,
-    rel: rel,
-    label: label,
-    linkTarget: linkTarget,
-    setAttributes: setMappedAttributes,
-    withBottomSheet: false,
-    hasPicker: true,
-    options: linkSettingsOptions,
-    showIcon: false,
-    onLinkCellPressed: ({
-      navigation
-    }) => {
-      navigation.navigate(blockSettingsScreens.imageLinkDestinations, {
-        inputValue: attributes.href,
-        linkDestination: attributes.linkDestination,
-        imageUrl: attributes.url,
-        attachmentPageUrl: image?.link
-      });
-    }
-  }));
+  return /*#__PURE__*/_jsx(PanelBody, {
+    title: __('Link Settings'),
+    children: /*#__PURE__*/_jsx(LinkSettingsNavigation, {
+      isVisible: isLinkSheetVisible,
+      url: url,
+      rel: rel,
+      label: label,
+      linkTarget: linkTarget,
+      setAttributes: setMappedAttributes,
+      withBottomSheet: false,
+      hasPicker: true,
+      options: linkSettingsOptions,
+      showIcon: false,
+      onLinkCellPressed: ({
+        navigation
+      }) => {
+        navigation.navigate(blockSettingsScreens.imageLinkDestinations, {
+          inputValue: attributes.href,
+          linkDestination: attributes.linkDestination,
+          imageUrl: attributes.url,
+          attachmentPageUrl: image?.link
+        });
+      }
+    })
+  });
 }
 const UPLOAD_STATE_IDLE = 0;
 const UPLOAD_STATE_UPLOADING = 1;
@@ -444,17 +447,18 @@ export class ImageEdit extends Component {
     }
   }
   getPlaceholderIcon() {
-    return createElement(Icon, {
+    return /*#__PURE__*/_jsx(Icon, {
       icon: placeholderIcon,
       ...this.props.getStylesFromColorScheme(styles.iconPlaceholder, styles.iconPlaceholderDark)
     });
   }
   showLoadingIndicator() {
-    return createElement(View, {
-      style: styles.image__loading
-    }, createElement(ActivityIndicator, {
-      animating: true
-    }));
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.image__loading,
+      children: /*#__PURE__*/_jsx(ActivityIndicator, {
+        animating: true
+      })
+    });
   }
   getWidth() {
     const {
@@ -496,16 +500,20 @@ export class ImageEdit extends Component {
         alt: newAlt
       });
     };
-    return createElement(BottomSheetTextControl, {
+    return /*#__PURE__*/_jsx(BottomSheetTextControl, {
       initialValue: alt,
       onChange: updateAlt,
       placeholder: __('Add alt text'),
       label: __('Alt Text'),
       icon: textColor,
-      footerNote: createElement(Fragment, null, __('Describe the purpose of the image. Leave empty if decorative.'), ' ', createElement(FooterMessageLink, {
-        href: 'https://www.w3.org/WAI/tutorials/images/decision-tree/',
-        value: __('What is alt text?')
-      }))
+      footerNote: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [__('Describe the purpose of the image. Leave empty if decorative.'), ' ', /*#__PURE__*/_jsx(FooterMessageLink, {
+          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/'),
+          value: __('What is alt text?')
+        })]
+      })
     });
   }
   onSizeChangeValue(newValue) {
@@ -524,18 +532,18 @@ export class ImageEdit extends Component {
       getStylesFromColorScheme
     } = this.props;
     const setFeaturedButtonStyle = getStylesFromColorScheme(styles.setFeaturedButton, styles.setFeaturedButtonDark);
-    const removeFeaturedButton = () => createElement(BottomSheet.Cell, {
+    const removeFeaturedButton = () => /*#__PURE__*/_jsx(BottomSheet.Cell, {
       label: __('Remove as Featured Image'),
       labelStyle: [setFeaturedButtonStyle, styles.removeFeaturedButton],
       cellContainerStyle: styles.setFeaturedButtonCellContainer,
-      separatorType: 'none',
+      separatorType: "none",
       onPress: () => this.onSetFeatured(MEDIA_ID_NO_FEATURED_IMAGE_SET)
     });
-    const setFeaturedButton = () => createElement(BottomSheet.Cell, {
+    const setFeaturedButton = () => /*#__PURE__*/_jsx(BottomSheet.Cell, {
       label: __('Set as Featured Image'),
       labelStyle: setFeaturedButtonStyle,
       cellContainerStyle: styles.setFeaturedButtonCellContainer,
-      separatorType: 'none',
+      separatorType: "none",
       onPress: () => this.onSetFeatured(attributes.id)
     });
     return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
@@ -603,47 +611,58 @@ export class ImageEdit extends Component {
     }
     const canImageBeFeatured = this.canImageBeFeatured();
     const isFeaturedImage = canImageBeFeatured && featuredImageId === attributes.id;
-    const getToolbarEditButton = open => createElement(BlockControls, null, createElement(ToolbarGroup, null, createElement(ToolbarButton, {
-      title: __('Edit image'),
-      icon: replace,
-      onClick: open
-    })));
-    const getInspectorControls = () => createElement(InspectorControls, null, createElement(PanelBody, {
-      title: __('Settings')
-    }), createElement(PanelBody, {
-      style: styles.panelBody
-    }, createElement(BlockStyles, {
-      clientId: clientId,
-      url: url
-    })), createElement(PanelBody, null, image && sizeOptionsValid && createElement(BottomSheetSelectControl, {
-      icon: fullscreen,
-      label: __('Size'),
-      options: sizeOptions,
-      onChange: this.onSizeChangeValue,
-      value: selectedSizeOption
-    }), this.getAltTextSettings()), createElement(LinkSettings, {
-      attributes: this.props.attributes,
-      image: this.props.image,
-      isLinkSheetVisible: this.state.isLinkSheetVisible,
-      setMappedAttributes: this.setMappedAttributes
-    }), createElement(PanelBody, {
-      title: __('Featured Image'),
-      titleStyle: styles.featuredImagePanelTitle
-    }, canImageBeFeatured && this.getFeaturedButtonPanel(isFeaturedImage), createElement(FooterMessageControl, {
-      label: __('Changes to featured image will not be affected by the undo/redo buttons.'),
-      cellContainerStyle: styles.setFeaturedButtonCellContainer
-    })));
+    const getToolbarEditButton = open => /*#__PURE__*/_jsx(BlockControls, {
+      children: /*#__PURE__*/_jsx(ToolbarGroup, {
+        children: /*#__PURE__*/_jsx(ToolbarButton, {
+          title: __('Edit image'),
+          icon: replace,
+          onClick: open
+        })
+      })
+    });
+    const getInspectorControls = () => /*#__PURE__*/_jsxs(InspectorControls, {
+      children: [/*#__PURE__*/_jsx(PanelBody, {
+        title: __('Settings')
+      }), /*#__PURE__*/_jsx(PanelBody, {
+        style: styles.panelBody,
+        children: /*#__PURE__*/_jsx(BlockStyles, {
+          clientId: clientId,
+          url: url
+        })
+      }), /*#__PURE__*/_jsxs(PanelBody, {
+        children: [image && sizeOptionsValid && /*#__PURE__*/_jsx(BottomSheetSelectControl, {
+          icon: fullscreen,
+          label: __('Size'),
+          options: sizeOptions,
+          onChange: this.onSizeChangeValue,
+          value: selectedSizeOption
+        }), this.getAltTextSettings()]
+      }), /*#__PURE__*/_jsx(LinkSettings, {
+        attributes: this.props.attributes,
+        image: this.props.image,
+        isLinkSheetVisible: this.state.isLinkSheetVisible,
+        setMappedAttributes: this.setMappedAttributes
+      }), /*#__PURE__*/_jsxs(PanelBody, {
+        title: __('Featured Image'),
+        titleStyle: styles.featuredImagePanelTitle,
+        children: [canImageBeFeatured && this.getFeaturedButtonPanel(isFeaturedImage), /*#__PURE__*/_jsx(FooterMessageControl, {
+          label: __('Changes to featured image will not be affected by the undo/redo buttons.'),
+          cellContainerStyle: styles.setFeaturedButtonCellContainer
+        })]
+      })]
+    });
     if (!url) {
-      return createElement(View, {
-        style: styles.content
-      }, isFetchingImage && this.showLoadingIndicator(), createElement(MediaPlaceholder, {
-        allowedTypes: [MEDIA_TYPE_IMAGE],
-        onSelect: this.onSelectMediaUploadOption,
-        onSelectURL: this.onSelectURL,
-        icon: this.getPlaceholderIcon(),
-        onFocus: this.props.onFocus,
-        autoOpenMediaUpload: isSelected && wasBlockJustInserted
-      }));
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.content,
+        children: [isFetchingImage && this.showLoadingIndicator(), /*#__PURE__*/_jsx(MediaPlaceholder, {
+          allowedTypes: [MEDIA_TYPE_IMAGE],
+          onSelect: this.onSelectMediaUploadOption,
+          onSelectURL: this.onSelectURL,
+          icon: this.getPlaceholderIcon(),
+          onFocus: this.props.onFocus,
+          autoOpenMediaUpload: isSelected && wasBlockJustInserted
+        })]
+      });
     }
     const alignToFlex = {
       left: 'flex-start',
@@ -665,59 +684,63 @@ export class ImageEdit extends Component {
     } else if (isGif) {
       badgeLabelText = __('GIF');
     }
-    const getImageComponent = (openMediaOptions, getMediaOptions) => createElement(Badge, {
+    const getImageComponent = (openMediaOptions, getMediaOptions) => /*#__PURE__*/_jsxs(Badge, {
       label: badgeLabelText,
-      show: badgeLabelShown
-    }, createElement(TouchableWithoutFeedback, {
-      accessible: !isSelected,
-      onPress: this.onImagePressed,
-      disabled: !isSelected
-    }, createElement(View, {
-      style: styles.content
-    }, isSelected && getInspectorControls(), isSelected && getMediaOptions(), !this.state.isCaptionSelected && getToolbarEditButton(openMediaOptions), createElement(MediaUploadProgress, {
-      enablePausedUploads: true,
-      coverUrl: url,
-      mediaId: id,
-      onUpdateMediaProgress: this.updateMediaProgress,
-      onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
-      onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
-      onMediaUploadStateReset: this.mediaUploadStateReset,
-      renderContent: ({
-        isUploadPaused,
-        isUploadInProgress,
-        isUploadFailed,
-        retryMessage
-      }) => {
-        return createElement(View, {
-          style: imageContainerStyles
-        }, isFetchingImage && this.showLoadingIndicator(), createElement(Image, {
-          align: align && alignToFlex[align],
-          alt: alt,
-          isSelected: isSelected && !isCaptionSelected,
-          isUploadFailed: isUploadFailed,
-          isUploadPaused: isUploadPaused,
-          isUploadInProgress: isUploadInProgress,
-          shouldUseFastImage: shouldUseFastImage,
-          onSelectMediaUploadOption: this.onSelectMediaUploadOption,
-          openMediaOptions: openMediaOptions,
-          retryMessage: retryMessage,
-          url: url,
-          shapeStyle: styles[className] || className,
-          width: this.getWidth(),
-          ...(hasImageContext ? additionalImageProps : {})
-        }));
-      }
-    }))), createElement(BlockCaption, {
-      clientId: this.props.clientId,
-      isSelected: this.state.isCaptionSelected,
-      accessible: !this.state.isCaptionSelected,
-      accessibilityLabelCreator: this.accessibilityLabelCreator,
-      onFocus: this.onFocusCaption,
-      onBlur: this.props.onBlur // Always assign onBlur as props.
-      ,
-      insertBlocksAfter: this.props.insertBlocksAfter
-    }));
-    return createElement(MediaUpload, {
+      show: badgeLabelShown,
+      children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
+        accessible: !isSelected,
+        onPress: this.onImagePressed,
+        disabled: !isSelected,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.content,
+          children: [isSelected && getInspectorControls(), isSelected && getMediaOptions(), !this.state.isCaptionSelected && getToolbarEditButton(openMediaOptions), /*#__PURE__*/_jsx(MediaUploadProgress, {
+            enablePausedUploads: true,
+            coverUrl: url,
+            mediaId: id,
+            onUpdateMediaProgress: this.updateMediaProgress,
+            onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
+            onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
+            onMediaUploadStateReset: this.mediaUploadStateReset,
+            renderContent: ({
+              isUploadPaused,
+              isUploadInProgress,
+              isUploadFailed,
+              retryMessage
+            }) => {
+              return /*#__PURE__*/_jsxs(View, {
+                style: imageContainerStyles,
+                children: [isFetchingImage && this.showLoadingIndicator(), /*#__PURE__*/_jsx(Image, {
+                  align: align && alignToFlex[align],
+                  alt: alt,
+                  isSelected: isSelected && !isCaptionSelected,
+                  isUploadFailed: isUploadFailed,
+                  isUploadPaused: isUploadPaused,
+                  isUploadInProgress: isUploadInProgress,
+                  shouldUseFastImage: shouldUseFastImage,
+                  onSelectMediaUploadOption: this.onSelectMediaUploadOption,
+                  openMediaOptions: openMediaOptions,
+                  retryMessage: retryMessage,
+                  url: url,
+                  shapeStyle: styles[className] || className,
+                  width: this.getWidth(),
+                  ...(hasImageContext ? additionalImageProps : {})
+                })]
+              });
+            }
+          })]
+        })
+      }), /*#__PURE__*/_jsx(BlockCaption, {
+        clientId: this.props.clientId,
+        isSelected: this.state.isCaptionSelected,
+        accessible: !this.state.isCaptionSelected,
+        accessibilityLabelCreator: this.accessibilityLabelCreator,
+        onFocus: this.onFocusCaption,
+        onBlur: this.props.onBlur // Always assign onBlur as props.
+        ,
+        insertBlocksAfter: this.props.insertBlocksAfter
+      })]
+    });
+    return /*#__PURE__*/_jsx(MediaUpload, {
       allowedTypes: [MEDIA_TYPE_IMAGE],
       isReplacingMedia: true,
       onSelect: this.onSelectMediaUploadOption,