@wordpress/block-editor
Version:
98 lines (90 loc) • 3.25 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";
/**
* WordPress dependencies
*/
import { createSlotFill, MenuGroup, MenuItem, __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { pipe } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useConvertToGroupButtonProps, ConvertToGroupButton } from '../convert-to-group-buttons';
import { BlockLockMenuItem, useBlockLock } from '../block-lock';
import { store as blockEditorStore } from '../../store';
import BlockModeToggle from '../block-settings-menu/block-mode-toggle';
const {
Fill,
Slot
} = createSlotFill('BlockSettingsMenuControls');
const BlockSettingsMenuControlsSlot = ({
fillProps,
clientIds = null,
__unstableDisplayLocation
}) => {
const {
selectedBlocks,
selectedClientIds,
canRemove
} = useSelect(select => {
const {
getBlockNamesByClientId,
getSelectedBlockClientIds,
canRemoveBlocks
} = select(blockEditorStore);
const ids = clientIds !== null ? clientIds : getSelectedBlockClientIds();
return {
selectedBlocks: getBlockNamesByClientId(ids),
selectedClientIds: ids,
canRemove: canRemoveBlocks(ids)
};
}, [clientIds]);
const {
canLock
} = useBlockLock(selectedClientIds[0]);
const showLockButton = selectedClientIds.length === 1 && canLock; // Check if current selection of blocks is Groupable or Ungroupable
// and pass this props down to ConvertToGroupButton.
const convertToGroupButtonProps = useConvertToGroupButtonProps(selectedClientIds);
const {
isGroupable,
isUngroupable
} = convertToGroupButtonProps;
const showConvertToGroupButton = (isGroupable || isUngroupable) && canRemove;
return createElement(Slot, {
fillProps: { ...fillProps,
__unstableDisplayLocation,
selectedBlocks,
selectedClientIds
}
}, fills => {
if (!fills?.length > 0 && !showConvertToGroupButton && !showLockButton) {
return null;
}
return createElement(MenuGroup, null, showConvertToGroupButton && createElement(ConvertToGroupButton, _extends({}, convertToGroupButtonProps, {
onClose: fillProps?.onClose
})), showLockButton && createElement(BlockLockMenuItem, {
clientId: selectedClientIds[0]
}), fills, fillProps?.canMove && !fillProps?.onlyBlock && createElement(MenuItem, {
onClick: pipe(fillProps?.onClose, fillProps?.onMoveTo)
}, __('Move to')), fillProps?.count === 1 && createElement(BlockModeToggle, {
clientId: fillProps?.firstBlockClientId,
onToggle: fillProps?.onClose
}));
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md
*
* @param {Object} props Fill props.
* @return {WPElement} Element.
*/
function BlockSettingsMenuControls({ ...props
}) {
return createElement(StyleProvider, {
document: document
}, createElement(Fill, props));
}
BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
export default BlockSettingsMenuControls;
//# sourceMappingURL=index.js.map