UNPKG

@wordpress/block-library

Version:
197 lines (193 loc) 6.01 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _clsx = _interopRequireDefault(require("clsx")); var _components = require("@wordpress/components"); var _blockEditor = require("@wordpress/block-editor"); var _i18n = require("@wordpress/i18n"); var _compose = require("@wordpress/compose"); var _data = require("@wordpress/data"); var _element = require("@wordpress/element"); var _blob = require("@wordpress/blob"); var _notices = require("@wordpress/notices"); var _icons = require("@wordpress/icons"); var _imageFill = require("./image-fill"); var _jsxRuntime = require("react/jsx-runtime"); /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ /** * Constants */const ALLOWED_MEDIA_TYPES = ['image', 'video']; const noop = () => {}; const ResizableBoxContainer = (0, _element.forwardRef)(({ isSelected, isStackedOnMobile, ...props }, ref) => { const isMobile = (0, _compose.useViewportMatch)('small', '<'); return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ResizableBox, { ref: ref, showHandle: isSelected && (!isMobile || !isStackedOnMobile), ...props }); }); function ToolbarEditButton({ mediaId, mediaUrl, onSelectMedia, toggleUseFeaturedImage, useFeaturedImage }) { return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, { group: "other", children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaReplaceFlow, { mediaId: mediaId, mediaURL: mediaUrl, allowedTypes: ALLOWED_MEDIA_TYPES, accept: "image/*,video/*", onSelect: onSelectMedia, onToggleFeaturedImage: toggleUseFeaturedImage, useFeaturedImage: useFeaturedImage, onReset: () => onSelectMedia(undefined) }) }); } function PlaceholderContainer({ className, mediaUrl, onSelectMedia, toggleUseFeaturedImage }) { const { createErrorNotice } = (0, _data.useDispatch)(_notices.store); const onUploadError = message => { createErrorNotice(message, { type: 'snackbar' }); }; return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, { icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, { icon: _icons.media }), labels: { title: (0, _i18n.__)('Media area') }, className: className, onSelect: onSelectMedia, accept: "image/*,video/*", onToggleFeaturedImage: toggleUseFeaturedImage, allowedTypes: ALLOWED_MEDIA_TYPES, onError: onUploadError, disableMediaButtons: mediaUrl }); } function MediaContainer(props, ref) { const { className, commitWidthChange, focalPoint, imageFill, isSelected, isStackedOnMobile, mediaAlt, mediaId, mediaPosition, mediaType, mediaUrl, mediaWidth, onSelectMedia, onWidthChange, enableResize, toggleUseFeaturedImage, useFeaturedImage, featuredImageURL, featuredImageAlt, refMedia } = props; const isTemporaryMedia = !mediaId && (0, _blob.isBlobURL)(mediaUrl); const { toggleSelection } = (0, _data.useDispatch)(_blockEditor.store); if (mediaUrl || featuredImageURL || useFeaturedImage) { const onResizeStart = () => { toggleSelection(false); }; const onResize = (event, direction, elt) => { onWidthChange(parseInt(elt.style.width)); }; const onResizeStop = (event, direction, elt) => { toggleSelection(true); commitWidthChange(parseInt(elt.style.width)); }; const enablePositions = { right: enableResize && mediaPosition === 'left', left: enableResize && mediaPosition === 'right' }; const positionStyles = mediaType === 'image' && imageFill ? (0, _imageFill.imageFillStyles)(mediaUrl || featuredImageURL, focalPoint) : {}; const mediaTypeRenderers = { image: () => useFeaturedImage && featuredImageURL ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", { ref: refMedia, src: featuredImageURL, alt: featuredImageAlt, style: positionStyles }) : mediaUrl && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", { ref: refMedia, src: mediaUrl, alt: mediaAlt, style: positionStyles }), video: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("video", { controls: true, ref: refMedia, src: mediaUrl }) }; return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ResizableBoxContainer, { as: "figure", className: (0, _clsx.default)(className, 'editor-media-container__resizer', { 'is-transient': isTemporaryMedia }), size: { width: mediaWidth + '%' }, minWidth: "10%", maxWidth: "100%", enable: enablePositions, onResizeStart: onResizeStart, onResize: onResize, onResizeStop: onResizeStop, axis: "x", isSelected: isSelected, isStackedOnMobile: isStackedOnMobile, ref: ref, children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarEditButton, { onSelectMedia: onSelectMedia, mediaUrl: useFeaturedImage && featuredImageURL ? featuredImageURL : mediaUrl, mediaId: mediaId, toggleUseFeaturedImage: toggleUseFeaturedImage }), (mediaTypeRenderers[mediaType] || noop)(), isTemporaryMedia && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {}), !useFeaturedImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceholderContainer, { ...props }), !featuredImageURL && useFeaturedImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Placeholder, { className: "wp-block-media-text--placeholder-image", style: positionStyles, withIllustration: true })] }); } return /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceholderContainer, { ...props }); } var _default = exports.default = (0, _element.forwardRef)(MediaContainer); //# sourceMappingURL=media-container.js.map