@wordpress/block-editor
Version:
70 lines (67 loc) • 2.46 kB
JavaScript
/**
* WordPress dependencies
*/
import { ToolbarButton } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';
import { useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import useBlockDisplayInformation from '../use-block-display-information';
import BlockIcon from '../block-icon';
import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';
/**
* Block parent selector component, displaying the hierarchy of the
* current block selection as a single icon to "go up" a level.
*
* @return {Component} Parent block selector.
*/
import { jsx as _jsx } from "react/jsx-runtime";
export default function BlockParentSelector() {
const {
selectBlock
} = useDispatch(blockEditorStore);
const {
parentClientId
} = useSelect(select => {
const {
getBlockParents,
getSelectedBlockClientId,
getParentSectionBlock
} = unlock(select(blockEditorStore));
const selectedBlockClientId = getSelectedBlockClientId();
const parentSection = getParentSectionBlock(selectedBlockClientId);
const parents = getBlockParents(selectedBlockClientId);
const _parentClientId = parentSection !== null && parentSection !== void 0 ? parentSection : parents[parents.length - 1];
return {
parentClientId: _parentClientId
};
}, []);
const blockInformation = useBlockDisplayInformation(parentClientId);
// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const nodeRef = useRef();
const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures({
ref: nodeRef,
highlightParent: true
});
return /*#__PURE__*/_jsx("div", {
className: "block-editor-block-parent-selector",
ref: nodeRef,
...showHoveredOrFocusedGestures,
children: /*#__PURE__*/_jsx(ToolbarButton, {
className: "block-editor-block-parent-selector__button",
onClick: () => selectBlock(parentClientId),
label: sprintf(/* translators: %s: Name of the block's parent. */
__('Select parent block: %s'), blockInformation?.title),
showTooltip: true,
icon: /*#__PURE__*/_jsx(BlockIcon, {
icon: blockInformation?.icon
})
})
}, parentClientId);
}
//# sourceMappingURL=index.js.map