@wordpress/block-editor
Version:
194 lines (187 loc) • 7.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useBlockProps = useBlockProps;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _compose = require("@wordpress/compose");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _useMovingAnimation = _interopRequireDefault(require("../../use-moving-animation"));
var _privateBlockContext = require("../private-block-context");
var _useFocusFirstElement = require("./use-focus-first-element");
var _useIsHovered = require("./use-is-hovered");
var _context = require("../../block-edit/context");
var _useFocusHandler = require("./use-focus-handler");
var _useSelectedBlockEventHandlers = require("./use-selected-block-event-handlers");
var _useBlockRefs = require("./use-block-refs");
var _useIntersectionObserver = require("./use-intersection-observer");
var _useScrollIntoView = require("./use-scroll-into-view");
var _useFlashEditableBlocks = require("../../use-flash-editable-blocks");
var _blockBindings = require("../../../utils/block-bindings");
var _useFirefoxDraggableCompatibility = require("./use-firefox-draggable-compatibility");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* This hook is used to lightly mark an element as a block element. The element
* should be the outermost element of a block. Call this hook and pass the
* returned props to the element to mark as a block. If you define a ref for the
* element, it is important to pass the ref to this hook, which the hook in turn
* will pass to the component through the props it returns. Optionally, you can
* also pass any other props through this hook, and they will be merged and
* returned.
*
* Use of this hook on the outermost element of a block is required if using API >= v2.
*
* @example
* ```js
* import { useBlockProps } from '@wordpress/block-editor';
*
* export default function Edit() {
*
* const blockProps = useBlockProps( {
* className: 'my-custom-class',
* style: {
* color: '#222222',
* backgroundColor: '#eeeeee'
* }
* } )
*
* return (
* <div { ...blockProps }>
*
* </div>
* )
* }
*
* ```
*
*
* @param {Object} props Optional. Props to pass to the element. Must contain
* the ref if one is defined.
* @param {Object} options Options for internal use only.
* @param {boolean} options.__unstableIsHtml
*
* @return {Object} Props to pass to the element to mark as a block.
*/
function useBlockProps(props = {}, {
__unstableIsHtml
} = {}) {
const {
clientId,
className,
wrapperProps = {},
isAligned,
index,
mode,
name,
blockApiVersion,
blockTitle,
isSelected,
isSubtreeDisabled,
hasOverlay,
initialPosition,
blockEditingMode,
isHighlighted,
isMultiSelected,
isPartiallySelected,
isReusable,
isDragging,
hasChildSelected,
isEditingDisabled,
hasEditableOutline,
isTemporarilyEditingAsBlocks,
defaultClassName,
isSectionBlock,
canMove
} = (0, _element.useContext)(_privateBlockContext.PrivateBlockContext);
// translators: %s: Type of block (i.e. Text, Image etc)
const blockLabel = (0, _i18n.sprintf)((0, _i18n.__)('Block: %s'), blockTitle);
const htmlSuffix = mode === 'html' && !__unstableIsHtml ? '-visual' : '';
const ffDragRef = (0, _useFirefoxDraggableCompatibility.useFirefoxDraggableCompatibility)();
const mergedRefs = (0, _compose.useMergeRefs)([props.ref, (0, _useFocusFirstElement.useFocusFirstElement)({
clientId,
initialPosition
}), (0, _useBlockRefs.useBlockRefProvider)(clientId), (0, _useFocusHandler.useFocusHandler)(clientId), (0, _useSelectedBlockEventHandlers.useEventHandlers)({
clientId,
isSelected
}), (0, _useIsHovered.useIsHovered)({
clientId
}), (0, _useIntersectionObserver.useIntersectionObserver)(), (0, _useMovingAnimation.default)({
triggerAnimationOnChange: index,
clientId
}), (0, _compose.useDisabled)({
isDisabled: !hasOverlay
}), (0, _useFlashEditableBlocks.useFlashEditableBlocks)({
clientId,
isEnabled: isSectionBlock
}), (0, _useScrollIntoView.useScrollIntoView)({
isSelected
}), canMove ? ffDragRef : undefined]);
const blockEditContext = (0, _context.useBlockEditContext)();
const hasBlockBindings = !!blockEditContext[_context.blockBindingsKey];
const bindingsStyle = hasBlockBindings && (0, _blockBindings.canBindBlock)(name) ? {
'--wp-admin-theme-color': 'var(--wp-block-synced-color)',
'--wp-admin-theme-color--rgb': 'var(--wp-block-synced-color--rgb)'
} : {};
// Ensures it warns only inside the `edit` implementation for the block.
if (blockApiVersion < 2 && clientId === blockEditContext.clientId) {
globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)(`Block type "${name}" must support API version 2 or higher to work correctly with "useBlockProps" method.`) : void 0;
}
let hasNegativeMargin = false;
if (wrapperProps?.style?.marginTop?.charAt(0) === '-' || wrapperProps?.style?.marginBottom?.charAt(0) === '-' || wrapperProps?.style?.marginLeft?.charAt(0) === '-' || wrapperProps?.style?.marginRight?.charAt(0) === '-') {
hasNegativeMargin = true;
}
return {
tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
draggable: canMove && !hasChildSelected ? true : undefined,
...wrapperProps,
...props,
ref: mergedRefs,
id: `block-${clientId}${htmlSuffix}`,
role: 'document',
'aria-label': blockLabel,
'data-block': clientId,
'data-type': name,
'data-title': blockTitle,
inert: isSubtreeDisabled ? 'true' : undefined,
className: (0, _clsx.default)('block-editor-block-list__block', {
// The wp-block className is important for editor styles.
'wp-block': !isAligned,
'has-block-overlay': hasOverlay,
'is-selected': isSelected,
'is-highlighted': isHighlighted,
'is-multi-selected': isMultiSelected,
'is-partially-selected': isPartiallySelected,
'is-reusable': isReusable,
'is-dragging': isDragging,
'has-child-selected': hasChildSelected,
'is-editing-disabled': isEditingDisabled,
'has-editable-outline': hasEditableOutline,
'has-negative-margin': hasNegativeMargin,
'is-content-locked-temporarily-editing-as-blocks': isTemporarilyEditingAsBlocks
}, className, props.className, wrapperProps.className, defaultClassName),
style: {
...wrapperProps.style,
...props.style,
...bindingsStyle
}
};
}
/**
* Call within a save function to get the props for the block wrapper.
*
* @param {Object} props Optional. Props to pass to the element.
*/
useBlockProps.save = _blocks.__unstableGetBlockProps;
//# sourceMappingURL=index.js.map