@wordpress/block-editor
Version:
255 lines (249 loc) • 11.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _skipToSelectedBlock = _interopRequireDefault(require("../skip-to-selected-block"));
var _blockCard = _interopRequireDefault(require("../block-card"));
var _multiSelectionInspector = _interopRequireDefault(require("../multi-selection-inspector"));
var _blockVariationTransforms = _interopRequireDefault(require("../block-variation-transforms"));
var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));
var _store = require("../../store");
var _blockStyles = _interopRequireDefault(require("../block-styles"));
var _inspectorControls = _interopRequireDefault(require("../inspector-controls"));
var _inspectorControlsTabs = _interopRequireDefault(require("../inspector-controls-tabs"));
var _useInspectorControlsTabs = _interopRequireDefault(require("../inspector-controls-tabs/use-inspector-controls-tabs"));
var _advancedControlsPanel = _interopRequireDefault(require("../inspector-controls-tabs/advanced-controls-panel"));
var _positionControlsPanel = _interopRequireDefault(require("../inspector-controls-tabs/position-controls-panel"));
var _useBlockInspectorAnimationSettings = _interopRequireDefault(require("./useBlockInspectorAnimationSettings"));
var _blockQuickNavigation = _interopRequireDefault(require("../block-quick-navigation"));
var _border = require("../../hooks/border");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function BlockStylesPanel({
clientId
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
title: (0, _i18n.__)('Styles'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockStyles.default, {
clientId: clientId
})
});
}
function BlockInspector() {
const {
count,
selectedBlockName,
selectedBlockClientId,
blockType,
isSectionBlock
} = (0, _data.useSelect)(select => {
const {
getSelectedBlockClientId,
getSelectedBlockCount,
getBlockName,
getParentSectionBlock,
isSectionBlock: _isSectionBlock
} = (0, _lockUnlock.unlock)(select(_store.store));
const _selectedBlockClientId = getSelectedBlockClientId();
const renderedBlockClientId = getParentSectionBlock(_selectedBlockClientId) || getSelectedBlockClientId();
const _selectedBlockName = renderedBlockClientId && getBlockName(renderedBlockClientId);
const _blockType = _selectedBlockName && (0, _blocks.getBlockType)(_selectedBlockName);
return {
count: getSelectedBlockCount(),
selectedBlockClientId: renderedBlockClientId,
selectedBlockName: _selectedBlockName,
blockType: _blockType,
isSectionBlock: _isSectionBlock(renderedBlockClientId)
};
}, []);
const availableTabs = (0, _useInspectorControlsTabs.default)(blockType?.name);
const showTabs = availableTabs?.length > 1;
// The block inspector animation settings will be completely
// removed in the future to create an API which allows the block
// inspector to transition between what it
// displays based on the relationship between the selected block
// and its parent, and only enable it if the parent is controlling
// its children blocks.
const blockInspectorAnimationSettings = (0, _useBlockInspectorAnimationSettings.default)(blockType);
const borderPanelLabel = (0, _border.useBorderPanelLabel)({
blockName: selectedBlockName
});
if (count > 1 && !isSectionBlock) {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_multiSelectionInspector.default, {}), showTabs ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControlsTabs.default, {
tabs: availableTabs
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "color",
label: (0, _i18n.__)('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "background",
label: (0, _i18n.__)('Background image')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "typography",
label: (0, _i18n.__)('Typography')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "dimensions",
label: (0, _i18n.__)('Dimensions')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "styles"
})]
})]
});
}
const isSelectedBlockUnregistered = selectedBlockName === (0, _blocks.getUnregisteredTypeHandlerName)();
/*
* If the selected block is of an unregistered type, avoid showing it as an actual selection
* because we want the user to focus on the unregistered block warning, not block settings.
*/
if (!blockType || !selectedBlockClientId || isSelectedBlockUnregistered) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "block-editor-block-inspector__no-blocks",
children: (0, _i18n.__)('No block selected.')
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockInspectorSingleBlockWrapper, {
animate: blockInspectorAnimationSettings,
wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedContainer, {
blockInspectorAnimationSettings: blockInspectorAnimationSettings,
selectedBlockClientId: selectedBlockClientId,
children: children
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockInspectorSingleBlock, {
clientId: selectedBlockClientId,
blockName: blockType.name,
isSectionBlock: isSectionBlock
})
});
}
const BlockInspectorSingleBlockWrapper = ({
animate,
wrapper,
children
}) => {
return animate ? wrapper(children) : children;
};
const AnimatedContainer = ({
blockInspectorAnimationSettings,
selectedBlockClientId,
children
}) => {
const animationOrigin = blockInspectorAnimationSettings && blockInspectorAnimationSettings.enterDirection === 'leftToRight' ? -50 : 50;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
animate: {
x: 0,
opacity: 1,
transition: {
ease: 'easeInOut',
duration: 0.14
}
},
initial: {
x: animationOrigin,
opacity: 0
},
children: children
}, selectedBlockClientId);
};
const BlockInspectorSingleBlock = ({
clientId,
blockName,
isSectionBlock
}) => {
const availableTabs = (0, _useInspectorControlsTabs.default)(blockName);
const showTabs = !isSectionBlock && availableTabs?.length > 1;
const hasBlockStyles = (0, _data.useSelect)(select => {
const {
getBlockStyles
} = select(_blocks.store);
const blockStyles = getBlockStyles(blockName);
return blockStyles && blockStyles.length > 0;
}, [blockName]);
const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
const borderPanelLabel = (0, _border.useBorderPanelLabel)({
blockName
});
const contentClientIds = (0, _data.useSelect)(select => {
// Avoid unnecessary subscription.
if (!isSectionBlock) {
return;
}
const {
getClientIdsOfDescendants,
getBlockName,
getBlockEditingMode
} = select(_store.store);
return getClientIdsOfDescendants(clientId).filter(current => getBlockName(current) !== 'core/list-item' && getBlockEditingMode(current) === 'contentOnly');
}, [isSectionBlock, clientId]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockCard.default, {
...blockInformation,
className: blockInformation.isSynced && 'is-synced'
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockVariationTransforms.default, {
blockClientId: clientId
}), showTabs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControlsTabs.default, {
hasBlockStyles: hasBlockStyles,
clientId: clientId,
blockName: blockName,
tabs: availableTabs
}), !showTabs && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [hasBlockStyles && /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockStylesPanel, {
clientId: clientId
}), contentClientIds && contentClientIds?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
title: (0, _i18n.__)('Content'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockQuickNavigation.default, {
clientIds: contentClientIds
})
}), !isSectionBlock && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "list"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "color",
label: (0, _i18n.__)('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "background",
label: (0, _i18n.__)('Background image')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "typography",
label: (0, _i18n.__)('Typography')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "dimensions",
label: (0, _i18n.__)('Dimensions')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "styles"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_positionControlsPanel.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default.Slot, {
group: "bindings"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_advancedControlsPanel.default, {})
})]
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skipToSelectedBlock.default, {}, "back")]
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
*/
var _default = exports.default = BlockInspector;
//# sourceMappingURL=index.js.map