@wordpress/block-library
Version:
Block library for the WordPress editor.
254 lines (221 loc) • 8.63 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PostFeaturedImageEdit;
var _element = require("@wordpress/element");
var _classnames = _interopRequireDefault(require("classnames"));
var _coreData = require("@wordpress/core-data");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _notices = require("@wordpress/notices");
var _dimensionControls = _interopRequireDefault(require("./dimension-controls"));
var _overlay = _interopRequireDefault(require("./overlay"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ALLOWED_MEDIA_TYPES = ['image'];
function getMediaSourceUrlBySizeSlug(media, slug) {
var _media$media_details, _media$media_details$, _media$media_details$2;
return (media === null || media === void 0 ? void 0 : (_media$media_details = media.media_details) === null || _media$media_details === void 0 ? void 0 : (_media$media_details$ = _media$media_details.sizes) === null || _media$media_details$ === void 0 ? void 0 : (_media$media_details$2 = _media$media_details$[slug]) === null || _media$media_details$2 === void 0 ? void 0 : _media$media_details$2.source_url) || (media === null || media === void 0 ? void 0 : media.source_url);
}
function PostFeaturedImageDisplay(_ref) {
let {
clientId,
attributes,
setAttributes,
context: {
postId,
postType: postTypeSlug,
queryId
}
} = _ref;
const isDescendentOfQueryLoop = Number.isFinite(queryId);
const {
isLink,
height,
width,
scale,
sizeSlug,
rel,
linkTarget
} = attributes;
const [featuredImage, setFeaturedImage] = (0, _coreData.useEntityProp)('postType', postTypeSlug, 'featured_media', postId);
const {
media,
postType
} = (0, _data.useSelect)(select => {
const {
getMedia,
getPostType
} = select(_coreData.store);
return {
media: featuredImage && getMedia(featuredImage, {
context: 'view'
}),
postType: postTypeSlug && getPostType(postTypeSlug)
};
}, [featuredImage, postTypeSlug]);
const mediaUrl = getMediaSourceUrlBySizeSlug(media, sizeSlug);
const imageSizes = (0, _data.useSelect)(select => select(_blockEditor.store).getSettings().imageSizes, []);
const imageSizeOptions = imageSizes.filter(_ref2 => {
var _media$media_details2, _media$media_details3, _media$media_details4;
let {
slug
} = _ref2;
return media === null || media === void 0 ? void 0 : (_media$media_details2 = media.media_details) === null || _media$media_details2 === void 0 ? void 0 : (_media$media_details3 = _media$media_details2.sizes) === null || _media$media_details3 === void 0 ? void 0 : (_media$media_details4 = _media$media_details3[slug]) === null || _media$media_details4 === void 0 ? void 0 : _media$media_details4.source_url;
}).map(_ref3 => {
let {
name,
slug
} = _ref3;
return {
value: slug,
label: name
};
});
const blockProps = (0, _blockEditor.useBlockProps)({
style: {
width,
height
}
});
const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(attributes);
const placeholder = content => {
return (0, _element.createElement)(_components.Placeholder, {
className: (0, _classnames.default)('block-editor-media-placeholder', borderProps.className),
withIllustration: true,
style: borderProps.style
}, content);
};
const onSelectImage = value => {
if (value !== null && value !== void 0 && value.id) {
setFeaturedImage(value.id);
}
};
const {
createErrorNotice
} = (0, _data.useDispatch)(_notices.store);
const onUploadError = message => {
createErrorNotice(message, {
type: 'snackbar'
});
};
const controls = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_dimensionControls.default, {
clientId: clientId,
attributes: attributes,
setAttributes: setAttributes,
imageSizeOptions: imageSizeOptions
}), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
title: (0, _i18n.__)('Link settings')
}, (0, _element.createElement)(_components.ToggleControl, {
label: postType !== null && postType !== void 0 && postType.labels.singular_name ? (0, _i18n.sprintf)( // translators: %s: Name of the post type e.g: "post".
(0, _i18n.__)('Link to %s'), postType.labels.singular_name.toLowerCase()) : (0, _i18n.__)('Link to post'),
onChange: () => setAttributes({
isLink: !isLink
}),
checked: isLink
}), isLink && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToggleControl, {
label: (0, _i18n.__)('Open in new tab'),
onChange: value => setAttributes({
linkTarget: value ? '_blank' : '_self'
}),
checked: linkTarget === '_blank'
}), (0, _element.createElement)(_components.TextControl, {
label: (0, _i18n.__)('Link rel'),
value: rel,
onChange: newRel => setAttributes({
rel: newRel
})
})))));
let image;
if (!featuredImage && isDescendentOfQueryLoop) {
return (0, _element.createElement)(_element.Fragment, null, controls, (0, _element.createElement)("div", blockProps, placeholder(), (0, _element.createElement)(_overlay.default, {
attributes: attributes,
setAttributes: setAttributes,
clientId: clientId
})));
}
const label = (0, _i18n.__)('Add a featured image');
const imageStyles = { ...borderProps.style,
height,
objectFit: height && scale
};
if (!featuredImage) {
image = (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
onSelect: onSelectImage,
accept: "image/*",
allowedTypes: ALLOWED_MEDIA_TYPES,
onError: onUploadError,
placeholder: placeholder,
mediaLibraryButton: _ref4 => {
let {
open
} = _ref4;
return (0, _element.createElement)(_components.Button, {
icon: _icons.upload,
variant: "primary",
label: label,
showTooltip: true,
tooltipPosition: "top center",
onClick: () => {
open();
}
});
}
});
} else {
// We have a Featured image so show a Placeholder if is loading.
image = !media ? placeholder() : (0, _element.createElement)("img", {
className: borderProps.className,
src: mediaUrl,
alt: media.alt_text ? (0, _i18n.sprintf)( // translators: %s: The image's alt text.
(0, _i18n.__)('Featured image: %s'), media.alt_text) : (0, _i18n.__)('Featured image'),
style: imageStyles
});
}
return (0, _element.createElement)(_element.Fragment, null, controls, !!media && !isDescendentOfQueryLoop && (0, _element.createElement)(_blockEditor.BlockControls, {
group: "other"
}, (0, _element.createElement)(_blockEditor.MediaReplaceFlow, {
mediaId: featuredImage,
mediaURL: mediaUrl,
allowedTypes: ALLOWED_MEDIA_TYPES,
accept: "image/*",
onSelect: onSelectImage,
onError: onUploadError
}, (0, _element.createElement)(_components.MenuItem, {
onClick: () => setFeaturedImage(0)
}, (0, _i18n.__)('Reset')))), (0, _element.createElement)("figure", blockProps, image, (0, _element.createElement)(_overlay.default, {
attributes: attributes,
setAttributes: setAttributes,
clientId: clientId
})));
}
function PostFeaturedImageEdit(props) {
var _props$context;
const blockProps = (0, _blockEditor.useBlockProps)();
const borderProps = (0, _blockEditor.__experimentalUseBorderProps)(props.attributes);
if (!((_props$context = props.context) !== null && _props$context !== void 0 && _props$context.postId)) {
return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_components.Placeholder, {
className: (0, _classnames.default)('block-editor-media-placeholder', borderProps.className),
withIllustration: true,
style: borderProps.style
}), (0, _element.createElement)(_overlay.default, {
attributes: props.attributes,
setAttributes: props.setAttributes,
clientId: props.clientId
}));
}
return (0, _element.createElement)(PostFeaturedImageDisplay, props);
}
//# sourceMappingURL=edit.js.map