@wordpress/block-library
Version:
Block library for the WordPress editor.
197 lines (193 loc) • 6.01 kB
JavaScript
;
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