@wordpress/block-library
Version:
Block library for the WordPress editor.
257 lines (218 loc) • 8.35 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PostTemplateEdit;
var _element = require("@wordpress/element");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _coreData = require("@wordpress/core-data");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const TEMPLATE = [['core/post-title'], ['core/post-date'], ['core/post-excerpt']];
function PostTemplateInnerBlocks() {
const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({
className: 'wp-block-post'
}, {
template: TEMPLATE
});
return (0, _element.createElement)("li", innerBlocksProps);
}
function PostTemplateBlockPreview(_ref) {
let {
blocks,
blockContextId,
isHidden,
setActiveBlockContextId
} = _ref;
const blockPreviewProps = (0, _blockEditor.__experimentalUseBlockPreview)({
blocks,
props: {
className: 'wp-block-post'
}
});
const handleOnClick = () => {
setActiveBlockContextId(blockContextId);
};
const style = {
display: isHidden ? 'none' : undefined
};
return (0, _element.createElement)("li", (0, _extends2.default)({}, blockPreviewProps, {
tabIndex: 0 // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
,
role: "button",
onClick: handleOnClick,
onKeyPress: handleOnClick,
style: style
}));
}
const MemoizedPostTemplateBlockPreview = (0, _element.memo)(PostTemplateBlockPreview);
function PostTemplateEdit(_ref2) {
let {
clientId,
context: {
query: {
perPage,
offset,
postType,
order,
orderBy,
author,
search,
exclude,
sticky,
inherit,
taxQuery,
parents,
pages,
// We gather extra query args to pass to the REST API call.
// This way extenders of Query Loop can add their own query args,
// and have accurate previews in the editor.
// Noting though that these args should either be supported by the
// REST API or be handled by custom REST filters like `rest_{$this->post_type}_query`.
...restQueryArgs
} = {},
queryContext = [{
page: 1
}],
templateSlug,
displayLayout: {
type: layoutType = 'flex',
columns = 1
} = {},
previewPostType
}
} = _ref2;
const [{
page
}] = queryContext;
const [activeBlockContextId, setActiveBlockContextId] = (0, _element.useState)();
const {
posts,
blocks
} = (0, _data.useSelect)(select => {
const {
getEntityRecords,
getTaxonomies
} = select(_coreData.store);
const {
getBlocks
} = select(_blockEditor.store);
const taxonomies = getTaxonomies({
type: postType,
per_page: -1,
context: 'view'
});
const templateCategory = inherit && (templateSlug === null || templateSlug === void 0 ? void 0 : templateSlug.startsWith('category-')) && getEntityRecords('taxonomy', 'category', {
context: 'view',
per_page: 1,
_fields: ['id'],
slug: templateSlug.replace('category-', '')
});
const query = {
offset: perPage ? perPage * (page - 1) + offset : 0,
order,
orderby: orderBy
}; // There is no need to build the taxQuery if we inherit.
if (taxQuery && !inherit) {
// We have to build the tax query for the REST API and use as
// keys the taxonomies `rest_base` with the `term ids` as values.
const builtTaxQuery = Object.entries(taxQuery).reduce((accumulator, _ref3) => {
let [taxonomySlug, terms] = _ref3;
const taxonomy = taxonomies === null || taxonomies === void 0 ? void 0 : taxonomies.find(_ref4 => {
let {
slug
} = _ref4;
return slug === taxonomySlug;
});
if (taxonomy !== null && taxonomy !== void 0 && taxonomy.rest_base) {
accumulator[taxonomy === null || taxonomy === void 0 ? void 0 : taxonomy.rest_base] = terms;
}
return accumulator;
}, {});
if (!!Object.keys(builtTaxQuery).length) {
Object.assign(query, builtTaxQuery);
}
}
if (perPage) {
query.per_page = perPage;
}
if (author) {
query.author = author;
}
if (search) {
query.search = search;
}
if (exclude !== null && exclude !== void 0 && exclude.length) {
query.exclude = exclude;
}
if (parents !== null && parents !== void 0 && parents.length) {
query.parent = parents;
} // If sticky is not set, it will return all posts in the results.
// If sticky is set to `only`, it will limit the results to sticky posts only.
// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
if (sticky) {
query.sticky = sticky === 'only';
} // If `inherit` is truthy, adjust conditionally the query to create a better preview.
if (inherit) {
// Change the post-type if needed.
if (templateSlug !== null && templateSlug !== void 0 && templateSlug.startsWith('archive-')) {
query.postType = templateSlug.replace('archive-', '');
postType = query.postType;
} else if (templateCategory) {
var _templateCategory$;
query.categories = (_templateCategory$ = templateCategory[0]) === null || _templateCategory$ === void 0 ? void 0 : _templateCategory$.id;
}
} // When we preview Query Loop blocks we should prefer the current
// block's postType, which is passed through block context.
const usedPostType = previewPostType || postType;
return {
posts: getEntityRecords('postType', usedPostType, { ...query,
...restQueryArgs
}),
blocks: getBlocks(clientId)
};
}, [perPage, page, offset, order, orderBy, clientId, author, search, postType, exclude, sticky, inherit, templateSlug, taxQuery, parents, restQueryArgs, previewPostType]);
const blockContexts = (0, _element.useMemo)(() => posts === null || posts === void 0 ? void 0 : posts.map(post => ({
postType: post.type,
postId: post.id
})), [posts]);
const hasLayoutFlex = layoutType === 'flex' && columns > 1;
const blockProps = (0, _blockEditor.useBlockProps)({
className: (0, _classnames.default)({
'is-flex-container': hasLayoutFlex,
[`columns-${columns}`]: hasLayoutFlex
})
});
if (!posts) {
return (0, _element.createElement)("p", blockProps, (0, _element.createElement)(_components.Spinner, null));
}
if (!posts.length) {
return (0, _element.createElement)("p", blockProps, " ", (0, _i18n.__)('No results found.'));
} // To avoid flicker when switching active block contexts, a preview is rendered
// for each block context, but the preview for the active block context is hidden.
// This ensures that when it is displayed again, the cached rendering of the
// block preview is used, instead of having to re-render the preview from scratch.
return (0, _element.createElement)("ul", blockProps, blockContexts && blockContexts.map(blockContext => {
var _blockContexts$, _blockContexts$2;
return (0, _element.createElement)(_blockEditor.BlockContextProvider, {
key: blockContext.postId,
value: blockContext
}, blockContext.postId === (activeBlockContextId || ((_blockContexts$ = blockContexts[0]) === null || _blockContexts$ === void 0 ? void 0 : _blockContexts$.postId)) ? (0, _element.createElement)(PostTemplateInnerBlocks, null) : null, (0, _element.createElement)(MemoizedPostTemplateBlockPreview, {
blocks: blocks,
blockContextId: blockContext.postId,
setActiveBlockContextId: setActiveBlockContextId,
isHidden: blockContext.postId === (activeBlockContextId || ((_blockContexts$2 = blockContexts[0]) === null || _blockContexts$2 === void 0 ? void 0 : _blockContexts$2.postId))
}));
}));
}
//# sourceMappingURL=edit.js.map