@wordpress/block-editor
Version:
247 lines (243 loc) • 9.49 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { getBlockType, getUnregisteredTypeHandlerName, store as blocksStore } from '@wordpress/blocks';
import { PanelBody, __unstableMotion as motion } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import SkipToSelectedBlock from '../skip-to-selected-block';
import BlockCard from '../block-card';
import MultiSelectionInspector from '../multi-selection-inspector';
import BlockVariationTransforms from '../block-variation-transforms';
import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store';
import BlockStyles from '../block-styles';
import { default as InspectorControls } from '../inspector-controls';
import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
import PositionControls from '../inspector-controls-tabs/position-controls-panel';
import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
import BlockQuickNavigation from '../block-quick-navigation';
import { useBorderPanelLabel } from '../../hooks/border';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function BlockStylesPanel({
clientId
}) {
return /*#__PURE__*/_jsx(PanelBody, {
title: __('Styles'),
children: /*#__PURE__*/_jsx(BlockStyles, {
clientId: clientId
})
});
}
function BlockInspector() {
const {
count,
selectedBlockName,
selectedBlockClientId,
blockType,
isSectionBlock
} = useSelect(select => {
const {
getSelectedBlockClientId,
getSelectedBlockCount,
getBlockName,
getParentSectionBlock,
isSectionBlock: _isSectionBlock
} = unlock(select(blockEditorStore));
const _selectedBlockClientId = getSelectedBlockClientId();
const renderedBlockClientId = getParentSectionBlock(_selectedBlockClientId) || getSelectedBlockClientId();
const _selectedBlockName = renderedBlockClientId && getBlockName(renderedBlockClientId);
const _blockType = _selectedBlockName && getBlockType(_selectedBlockName);
return {
count: getSelectedBlockCount(),
selectedBlockClientId: renderedBlockClientId,
selectedBlockName: _selectedBlockName,
blockType: _blockType,
isSectionBlock: _isSectionBlock(renderedBlockClientId)
};
}, []);
const availableTabs = useInspectorControlsTabs(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 = useBlockInspectorAnimationSettings(blockType);
const borderPanelLabel = useBorderPanelLabel({
blockName: selectedBlockName
});
if (count > 1 && !isSectionBlock) {
return /*#__PURE__*/_jsxs("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/_jsx(MultiSelectionInspector, {}), showTabs ? /*#__PURE__*/_jsx(InspectorControlsTabs, {
tabs: availableTabs
}) : /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(InspectorControls.Slot, {}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "color",
label: __('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "background",
label: __('Background image')
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "typography",
label: __('Typography')
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "dimensions",
label: __('Dimensions')
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "styles"
})]
})]
});
}
const isSelectedBlockUnregistered = selectedBlockName === 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__*/_jsx("span", {
className: "block-editor-block-inspector__no-blocks",
children: __('No block selected.')
});
}
return /*#__PURE__*/_jsx(BlockInspectorSingleBlockWrapper, {
animate: blockInspectorAnimationSettings,
wrapper: children => /*#__PURE__*/_jsx(AnimatedContainer, {
blockInspectorAnimationSettings: blockInspectorAnimationSettings,
selectedBlockClientId: selectedBlockClientId,
children: children
}),
children: /*#__PURE__*/_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__*/_jsx(motion.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 = useInspectorControlsTabs(blockName);
const showTabs = !isSectionBlock && availableTabs?.length > 1;
const hasBlockStyles = useSelect(select => {
const {
getBlockStyles
} = select(blocksStore);
const blockStyles = getBlockStyles(blockName);
return blockStyles && blockStyles.length > 0;
}, [blockName]);
const blockInformation = useBlockDisplayInformation(clientId);
const borderPanelLabel = useBorderPanelLabel({
blockName
});
const contentClientIds = useSelect(select => {
// Avoid unnecessary subscription.
if (!isSectionBlock) {
return;
}
const {
getClientIdsOfDescendants,
getBlockName,
getBlockEditingMode
} = select(blockEditorStore);
return getClientIdsOfDescendants(clientId).filter(current => getBlockName(current) !== 'core/list-item' && getBlockEditingMode(current) === 'contentOnly');
}, [isSectionBlock, clientId]);
return /*#__PURE__*/_jsxs("div", {
className: "block-editor-block-inspector",
children: [/*#__PURE__*/_jsx(BlockCard, {
...blockInformation,
className: blockInformation.isSynced && 'is-synced'
}), /*#__PURE__*/_jsx(BlockVariationTransforms, {
blockClientId: clientId
}), showTabs && /*#__PURE__*/_jsx(InspectorControlsTabs, {
hasBlockStyles: hasBlockStyles,
clientId: clientId,
blockName: blockName,
tabs: availableTabs
}), !showTabs && /*#__PURE__*/_jsxs(_Fragment, {
children: [hasBlockStyles && /*#__PURE__*/_jsx(BlockStylesPanel, {
clientId: clientId
}), contentClientIds && contentClientIds?.length > 0 && /*#__PURE__*/_jsx(PanelBody, {
title: __('Content'),
children: /*#__PURE__*/_jsx(BlockQuickNavigation, {
clientIds: contentClientIds
})
}), !isSectionBlock && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(InspectorControls.Slot, {}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "list"
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "color",
label: __('Color'),
className: "color-block-support-panel__inner-wrapper"
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "background",
label: __('Background image')
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "typography",
label: __('Typography')
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "dimensions",
label: __('Dimensions')
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "border",
label: borderPanelLabel
}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "styles"
}), /*#__PURE__*/_jsx(PositionControls, {}), /*#__PURE__*/_jsx(InspectorControls.Slot, {
group: "bindings"
}), /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(AdvancedControls, {})
})]
})]
}), /*#__PURE__*/_jsx(SkipToSelectedBlock, {}, "back")]
});
};
/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
*/
export default BlockInspector;
//# sourceMappingURL=index.js.map