@wordpress/block-library
Version:
Block library for the WordPress editor.
105 lines (93 loc) • 4.1 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = NavigationInnerBlocks;
var _element = require("@wordpress/element");
var _coreData = require("@wordpress/core-data");
var _blockEditor = require("@wordpress/block-editor");
var _data = require("@wordpress/data");
var _placeholderPreview = _interopRequireDefault(require("./placeholder/placeholder-preview"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ALLOWED_BLOCKS = ['core/navigation-link', 'core/search', 'core/social-links', 'core/page-list', 'core/spacer', 'core/home-link', 'core/site-title', 'core/site-logo', 'core/navigation-submenu'];
const DEFAULT_BLOCK = {
name: 'core/navigation-link'
};
const LAYOUT = {
type: 'default',
alignments: []
};
function NavigationInnerBlocks(_ref) {
let {
clientId,
hasCustomPlaceholder,
orientation
} = _ref;
const {
isImmediateParentOfSelectedBlock,
selectedBlockHasChildren,
isSelected
} = (0, _data.useSelect)(select => {
const {
getBlockCount,
hasSelectedInnerBlock,
getSelectedBlockClientId
} = select(_blockEditor.store);
const selectedBlockId = getSelectedBlockClientId();
return {
isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(clientId, false),
selectedBlockHasChildren: !!getBlockCount(selectedBlockId),
// This prop is already available but computing it here ensures it's
// fresh compared to isImmediateParentOfSelectedBlock.
isSelected: selectedBlockId === clientId
};
}, [clientId]);
const [blocks, onInput, onChange] = (0, _coreData.useEntityBlockEditor)('postType', 'wp_navigation');
const shouldDirectInsert = (0, _element.useMemo)(() => blocks.every(_ref2 => {
let {
name
} = _ref2;
return name === 'core/navigation-link' || name === 'core/navigation-submenu' || name === 'core/page-list';
}), [blocks]); // When the block is selected itself or has a top level item selected that
// doesn't itself have children, show the standard appender. Else show no
// appender.
const parentOrChildHasSelection = isSelected || isImmediateParentOfSelectedBlock && !selectedBlockHasChildren;
const placeholder = (0, _element.useMemo)(() => (0, _element.createElement)(_placeholderPreview.default, null), []);
const hasMenuItems = !!(blocks !== null && blocks !== void 0 && blocks.length); // If there is a `ref` attribute pointing to a `wp_navigation` but
// that menu has no **items** (i.e. empty) then show a placeholder.
// The block must also be selected else the placeholder will display
// alongside the appender.
const showPlaceholder = !hasCustomPlaceholder && !hasMenuItems && !isSelected;
const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)({
className: 'wp-block-navigation__container'
}, {
value: blocks,
onInput,
onChange,
allowedBlocks: ALLOWED_BLOCKS,
__experimentalDefaultBlock: DEFAULT_BLOCK,
__experimentalDirectInsert: shouldDirectInsert,
orientation,
// As an exception to other blocks which feature nesting, show
// the block appender even when a child block is selected.
// This should be a temporary fix, to be replaced by improvements to
// the sibling inserter.
// See https://github.com/WordPress/gutenberg/issues/37572.
renderAppender: isSelected || isImmediateParentOfSelectedBlock && !selectedBlockHasChildren || // Show the appender while dragging to allow inserting element between item and the appender.
parentOrChildHasSelection ? _blockEditor.InnerBlocks.ButtonBlockAppender : false,
// Template lock set to false here so that the Nav
// Block on the experimental menus screen does not
// inherit templateLock={ 'all' }.
templateLock: false,
__experimentalLayout: LAYOUT,
placeholder: showPlaceholder ? placeholder : undefined
});
return (0, _element.createElement)("div", innerBlocksProps);
}
//# sourceMappingURL=inner-blocks.js.map
;