UNPKG

@wordpress/block-editor

Version:
73 lines (62 loc) 2.12 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.useBlockClassNames = useBlockClassNames; var _classnames = _interopRequireDefault(require("classnames")); var _data = require("@wordpress/data"); var _blocks = require("@wordpress/blocks"); var _store = require("../../../store"); /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ /** * Returns the class names used for the different states of the block. * * @param {string} clientId The block client ID. * * @return {string} The class names. */ function useBlockClassNames(clientId) { return (0, _data.useSelect)(select => { const { isBlockBeingDragged, isBlockHighlighted, isBlockSelected, isBlockMultiSelected, getBlockName, getSettings, hasSelectedInnerBlock, isTyping, __unstableIsFullySelected, __unstableSelectionHasUnmergeableBlock } = select(_store.store); const { outlineMode } = getSettings(); const isDragging = isBlockBeingDragged(clientId); const isSelected = isBlockSelected(clientId); const name = getBlockName(clientId); const checkDeep = true; // "ancestor" is the more appropriate label due to "deep" check. const isAncestorOfSelectedBlock = hasSelectedInnerBlock(clientId, checkDeep); const isMultiSelected = isBlockMultiSelected(clientId); return (0, _classnames.default)({ 'is-selected': isSelected, 'is-highlighted': isBlockHighlighted(clientId), 'is-multi-selected': isMultiSelected, 'is-partially-selected': isMultiSelected && !__unstableIsFullySelected() && !__unstableSelectionHasUnmergeableBlock(), 'is-reusable': (0, _blocks.isReusableBlock)((0, _blocks.getBlockType)(name)), 'is-dragging': isDragging, 'has-child-selected': isAncestorOfSelectedBlock, 'remove-outline': isSelected && outlineMode && isTyping() }); }, [clientId]); } //# sourceMappingURL=use-block-class-names.js.map