@wordpress/block-editor
Version:
73 lines (62 loc) • 2.12 kB
JavaScript
;
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