@wordpress/block-library
Version:
Block library for the WordPress editor.
155 lines (146 loc) • 4.37 kB
JavaScript
import { createElement, Fragment } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { AlignmentControl, BlockControls, InspectorControls, RichText, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { store as coreStore } from '@wordpress/core-data';
function PostAuthorEdit(_ref) {
let {
isSelected,
context: {
postType,
postId,
queryId
},
attributes,
setAttributes
} = _ref;
const isDescendentOfQueryLoop = Number.isFinite(queryId);
const {
authorId,
authorDetails,
authors
} = useSelect(select => {
var _getEditedEntityRecor;
const {
getEditedEntityRecord,
getUser,
getUsers
} = select(coreStore);
const _authorId = (_getEditedEntityRecor = getEditedEntityRecord('postType', postType, postId)) === null || _getEditedEntityRecor === void 0 ? void 0 : _getEditedEntityRecor.author;
return {
authorId: _authorId,
authorDetails: _authorId ? getUser(_authorId) : null,
authors: getUsers({
who: 'authors'
})
};
}, [postType, postId]);
const {
editEntityRecord
} = useDispatch(coreStore);
const {
textAlign,
showAvatar,
showBio,
byline
} = attributes;
const avatarSizes = [];
if (authorDetails) {
Object.keys(authorDetails.avatar_urls).forEach(size => {
avatarSizes.push({
value: size,
label: `${size} x ${size}`
});
});
}
const blockProps = useBlockProps({
className: classnames({
[`has-text-align-${textAlign}`]: textAlign
})
});
return createElement(Fragment, null, createElement(InspectorControls, null, createElement(PanelBody, {
title: __('Settings')
}, !!postId && !isDescendentOfQueryLoop && !!(authors !== null && authors !== void 0 && authors.length) && createElement(SelectControl, {
label: __('Author'),
value: authorId,
options: authors.map(_ref2 => {
let {
id,
name
} = _ref2;
return {
value: id,
label: name
};
}),
onChange: nextAuthorId => {
editEntityRecord('postType', postType, postId, {
author: nextAuthorId
});
}
}), createElement(ToggleControl, {
label: __('Show avatar'),
checked: showAvatar,
onChange: () => setAttributes({
showAvatar: !showAvatar
})
}), showAvatar && createElement(SelectControl, {
label: __('Avatar size'),
value: attributes.avatarSize,
options: avatarSizes,
onChange: size => {
setAttributes({
avatarSize: Number(size)
});
}
}), createElement(ToggleControl, {
label: __('Show bio'),
checked: showBio,
onChange: () => setAttributes({
showBio: !showBio
})
}))), createElement(BlockControls, {
group: "block"
}, createElement(AlignmentControl, {
value: textAlign,
onChange: nextAlign => {
setAttributes({
textAlign: nextAlign
});
}
})), createElement("div", blockProps, showAvatar && authorDetails && createElement("div", {
className: "wp-block-post-author__avatar"
}, createElement("img", {
width: attributes.avatarSize,
src: authorDetails.avatar_urls[attributes.avatarSize],
alt: authorDetails.name
})), createElement("div", {
className: "wp-block-post-author__content"
}, (!RichText.isEmpty(byline) || isSelected) && createElement(RichText, {
className: "wp-block-post-author__byline",
multiline: false,
"aria-label": __('Post author byline text'),
placeholder: __('Write byline…'),
value: byline,
onChange: value => setAttributes({
byline: value
})
}), createElement("p", {
className: "wp-block-post-author__name"
}, (authorDetails === null || authorDetails === void 0 ? void 0 : authorDetails.name) || __('Post Author')), showBio && createElement("p", {
className: "wp-block-post-author__bio",
dangerouslySetInnerHTML: {
__html: authorDetails === null || authorDetails === void 0 ? void 0 : authorDetails.description
}
}))));
}
export default PostAuthorEdit;
//# sourceMappingURL=edit.js.map