@wordpress/block-editor
Version:
246 lines (238 loc) • 11.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PrivateBlockToolbar = PrivateBlockToolbar;
exports.default = BlockToolbar;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _blockMover = _interopRequireDefault(require("../block-mover"));
var _blockParentSelector = _interopRequireDefault(require("../block-parent-selector"));
var _blockSwitcher = _interopRequireDefault(require("../block-switcher"));
var _blockControls = _interopRequireDefault(require("../block-controls"));
var _blockToolbarLastItem = _interopRequireDefault(require("./block-toolbar-last-item"));
var _blockSettingsMenu = _interopRequireDefault(require("../block-settings-menu"));
var _blockLock = require("../block-lock");
var _convertToGroupButtons = require("../convert-to-group-buttons");
var _blockEditVisuallyButton = _interopRequireDefault(require("../block-edit-visually-button"));
var _utils = require("./utils");
var _store = require("../../store");
var _blockNameContext = _interopRequireDefault(require("./block-name-context"));
var _navigableToolbar = _interopRequireDefault(require("../navigable-toolbar"));
var _useHasBlockToolbar = require("./use-has-block-toolbar");
var _changeDesign = _interopRequireDefault(require("./change-design"));
var _switchSectionStyle = _interopRequireDefault(require("./switch-section-style"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Renders the block toolbar.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
*
* @param {Object} props Components props.
* @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
* @param {boolean} props.focusOnMount Focus the toolbar when mounted.
* @param {number} props.__experimentalInitialIndex The initial index of the toolbar item to focus.
* @param {Function} props.__experimentalOnIndexChange Callback function to be called when the index of the focused toolbar item changes.
* @param {string} props.variant Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
*/
function PrivateBlockToolbar({
hideDragHandle,
focusOnMount,
__experimentalInitialIndex,
__experimentalOnIndexChange,
variant = 'unstyled'
}) {
const {
blockClientId,
blockClientIds,
isDefaultEditingMode,
blockType,
toolbarKey,
shouldShowVisualToolbar,
showParentSelector,
isUsingBindings,
hasParentPattern,
hasContentOnlyLocking,
showShuffleButton,
showSlots,
showGroupButtons,
showLockButtons,
showSwitchSectionStyleButton,
hasFixedToolbar,
isNavigationMode
} = (0, _data.useSelect)(select => {
const {
getBlockName,
getBlockMode,
getBlockParents,
getSelectedBlockClientIds,
isBlockValid,
getBlockEditingMode,
getBlockAttributes,
getBlockParentsByBlockName,
getTemplateLock,
getSettings,
getParentSectionBlock,
isZoomOut,
isNavigationMode: _isNavigationMode
} = (0, _lockUnlock.unlock)(select(_store.store));
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[0];
const parents = getBlockParents(selectedBlockClientId);
const parentSection = getParentSectionBlock(selectedBlockClientId);
const parentClientId = parentSection !== null && parentSection !== void 0 ? parentSection : parents[parents.length - 1];
const parentBlockName = getBlockName(parentClientId);
const parentBlockType = (0, _blocks.getBlockType)(parentBlockName);
const editingMode = getBlockEditingMode(selectedBlockClientId);
const _isDefaultEditingMode = editingMode === 'default';
const _blockName = getBlockName(selectedBlockClientId);
const isValid = selectedBlockClientIds.every(id => isBlockValid(id));
const isVisual = selectedBlockClientIds.every(id => getBlockMode(id) === 'visual');
const _isUsingBindings = selectedBlockClientIds.every(clientId => !!getBlockAttributes(clientId)?.metadata?.bindings);
const _hasParentPattern = selectedBlockClientIds.every(clientId => getBlockParentsByBlockName(clientId, 'core/block', true).length > 0);
// If one or more selected blocks are locked, do not show the BlockGroupToolbar.
const _hasTemplateLock = selectedBlockClientIds.some(id => getTemplateLock(id) === 'contentOnly');
const _isZoomOut = isZoomOut();
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && (0, _blocks.getBlockType)(_blockName),
shouldShowVisualToolbar: isValid && isVisual,
toolbarKey: `${selectedBlockClientId}${parentClientId}`,
showParentSelector: !_isZoomOut && parentBlockType && editingMode !== 'contentOnly' && getBlockEditingMode(parentClientId) !== 'disabled' && (0, _blocks.hasBlockSupport)(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length === 1,
isUsingBindings: _isUsingBindings,
hasParentPattern: _hasParentPattern,
hasContentOnlyLocking: _hasTemplateLock,
showShuffleButton: _isZoomOut,
showSlots: !_isZoomOut,
showGroupButtons: !_isZoomOut,
showLockButtons: !_isZoomOut,
showSwitchSectionStyleButton: _isZoomOut,
hasFixedToolbar: getSettings().hasFixedToolbar,
isNavigationMode: _isNavigationMode()
};
}, []);
const toolbarWrapperRef = (0, _element.useRef)(null);
// Handles highlighting the current block outline on hover or focus of the
// block type toolbar area.
const nodeRef = (0, _element.useRef)();
const showHoveredOrFocusedGestures = (0, _utils.useShowHoveredOrFocusedGestures)({
ref: nodeRef
});
const isLargeViewport = !(0, _compose.useViewportMatch)('medium', '<');
const hasBlockToolbar = (0, _useHasBlockToolbar.useHasBlockToolbar)();
if (!hasBlockToolbar) {
return null;
}
const isMultiToolbar = blockClientIds.length > 1;
const isSynced = (0, _blocks.isReusableBlock)(blockType) || (0, _blocks.isTemplatePart)(blockType);
// Shifts the toolbar to make room for the parent block selector.
const classes = (0, _clsx.default)('block-editor-block-contextual-toolbar', {
'has-parent': showParentSelector,
'is-inverted-toolbar': isNavigationMode && !hasFixedToolbar
});
const innerClasses = (0, _clsx.default)('block-editor-block-toolbar', {
'is-synced': isSynced,
'is-connected': isUsingBindings
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableToolbar.default, {
focusEditorOnEscape: true,
className: classes
/* translators: accessibility text for the block toolbar */,
"aria-label": (0, _i18n.__)('Block tools')
// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
,
variant: variant === 'toolbar' ? undefined : variant,
focusOnMount: focusOnMount,
__experimentalInitialIndex: __experimentalInitialIndex,
__experimentalOnIndexChange: __experimentalOnIndexChange
// Resets the index whenever the active block changes so
// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
ref: toolbarWrapperRef,
className: innerClasses,
children: [showParentSelector && !isMultiToolbar && isLargeViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockParentSelector.default, {}), (shouldShowVisualToolbar || isMultiToolbar) && !hasParentPattern && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: nodeRef,
...showHoveredOrFocusedGestures,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
className: "block-editor-block-toolbar__block-controls",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSwitcher.default, {
clientIds: blockClientIds
}), !isMultiToolbar && isDefaultEditingMode && showLockButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockLock.BlockLockToolbar, {
clientId: blockClientId
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockMover.default, {
clientIds: blockClientIds,
hideDragHandle: hideDragHandle
})]
})
}), !hasContentOnlyLocking && shouldShowVisualToolbar && isMultiToolbar && showGroupButtons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_convertToGroupButtons.BlockGroupToolbar, {}), showShuffleButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_changeDesign.default, {
clientId: blockClientIds[0]
}), showSwitchSectionStyleButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_switchSectionStyle.default, {
clientId: blockClientIds[0]
}), shouldShowVisualToolbar && showSlots && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
group: "parent",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
group: "block",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
group: "inline",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockControls.default.Slot, {
group: "other",
className: "block-editor-block-toolbar__slot"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockNameContext.default.Provider, {
value: blockType?.name,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockToolbarLastItem.default.Slot, {})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditVisuallyButton.default, {
clientIds: blockClientIds
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockSettingsMenu.default, {
clientIds: blockClientIds
})]
})
}, toolbarKey);
}
/**
* Renders the block toolbar.
*
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md
*
* @param {Object} props Components props.
* @param {boolean} props.hideDragHandle Show or hide the Drag Handle for drag and drop functionality.
* @param {string} props.variant Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
*/
function BlockToolbar({
hideDragHandle,
variant
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(PrivateBlockToolbar, {
hideDragHandle: hideDragHandle,
variant: variant,
focusOnMount: undefined,
__experimentalInitialIndex: undefined,
__experimentalOnIndexChange: undefined
});
}
//# sourceMappingURL=index.js.map