@wordpress/block-editor
Version:
8 lines (7 loc) • 9.8 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/block-card/index.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalText as Text,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tchevronLeft,\n\tchevronRight,\n\tarrowRight,\n\tarrowLeft,\n} from '@wordpress/icons';\nimport { getBlockType, hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\n\nconst { Badge } = unlock( componentsPrivateApis );\n\nfunction OptionalParentSelectButton( { children, onClick } ) {\n\tif ( ! onClick ) {\n\t\treturn children;\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"block-editor-block-card__parent-select-button\"\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/**\n * A card component that displays block information including title, icon, and description.\n * Can be used to show block metadata and navigation controls for parent blocks.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-card/README.md\n *\n * @example\n * ```jsx\n * function Example() {\n * return (\n * <BlockCard\n * title=\"My Block\"\n * icon=\"smiley\"\n * description=\"A simple block example\"\n * name=\"Custom Block\"\n * />\n * );\n * }\n * ```\n *\n * @param {Object} props Component props.\n * @param {string} props.title The title of the block.\n * @param {string|Object} props.icon The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.\n * @param {string} props.description The description of the block.\n * @param {Object} [props.blockType] Deprecated: Object containing block type data.\n * @param {string} [props.className] Additional classes to apply to the card.\n * @param {string} [props.name] Custom block name to display before the title.\n * @param {string} [props.allowParentNavigation] Show a back arrow to the parent block in some situations.\n * @param {string} [props.parentClientId] The parent clientId, if this card is for a parent block.\n * @param {string} [props.isChild] Whether the block card is for a child block, in which case, indent the block using an arrow.\n * @param {string} [props.clientId] Whether the block card is for a child block, in which case, indent the block using an arrow.\n * @param {Element} [props.children] Children.\n * @return {Element} Block card component.\n */\nfunction BlockCard( {\n\ttitle,\n\ticon,\n\tdescription,\n\tblockType,\n\tclassName,\n\tname,\n\tallowParentNavigation,\n\tparentClientId,\n\tisChild,\n\tchildren,\n\tclientId,\n} ) {\n\tif ( blockType ) {\n\t\tdeprecated( '`blockType` property in `BlockCard component`', {\n\t\t\tsince: '5.7',\n\t\t\talternative: '`title, icon and description` properties',\n\t\t} );\n\t\t( { title, icon, description } = blockType );\n\t}\n\n\tconst { parentBlockClientId, parentBlockName } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( parentClientId || isChild || ! allowParentNavigation ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst { getBlockParents, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\t// Find the closest parent block that is either:\n\t\t\t// 1. A navigation block (special case for ad-hoc list view support)\n\t\t\t// 2. Any block with listView support\n\t\t\tconst parents = getBlockParents( clientId, true );\n\t\t\tconst foundParentId = parents.find( ( parentId ) => {\n\t\t\t\tconst parentName = getBlockName( parentId );\n\t\t\t\treturn (\n\t\t\t\t\tparentName === 'core/navigation' ||\n\t\t\t\t\thasBlockSupport( parentName, 'listView' )\n\t\t\t\t);\n\t\t\t} );\n\n\t\t\treturn {\n\t\t\t\tparentBlockClientId: foundParentId,\n\t\t\t\tparentBlockName: foundParentId\n\t\t\t\t\t? getBlockName( foundParentId )\n\t\t\t\t\t: null,\n\t\t\t};\n\t\t},\n\t\t[ clientId, allowParentNavigation, isChild, parentClientId ]\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst TitleElement = parentClientId ? 'div' : 'h2';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-block-card',\n\t\t\t\t{\n\t\t\t\t\t'is-parent': parentClientId,\n\t\t\t\t\t'is-child': isChild,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<VStack>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 0 }>\n\t\t\t\t\t{ parentBlockClientId && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () => selectBlock( parentBlockClientId ) }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tparentBlockName\n\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: The name of the parent block. */\n\t\t\t\t\t\t\t\t\t\t\t__( 'Go to \"%s\" block' ),\n\t\t\t\t\t\t\t\t\t\t\tgetBlockType( parentBlockName )\n\t\t\t\t\t\t\t\t\t\t\t\t?.title\n\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t: __( 'Go to parent block' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isChild && (\n\t\t\t\t\t\t<span className=\"block-editor-block-card__child-indicator-icon\">\n\t\t\t\t\t\t\t<Icon icon={ isRTL() ? arrowLeft : arrowRight } />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t\t<OptionalParentSelectButton\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tparentClientId\n\t\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t\tselectBlock( parentClientId );\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t<TitleElement className=\"block-editor-block-card__title\">\n\t\t\t\t\t\t\t\t<span className=\"block-editor-block-card__name\">\n\t\t\t\t\t\t\t\t\t{ !! name?.length ? name : title }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{ ! parentClientId &&\n\t\t\t\t\t\t\t\t\t! isChild &&\n\t\t\t\t\t\t\t\t\t!! name?.length && (\n\t\t\t\t\t\t\t\t\t\t<Badge>{ title }</Badge>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</TitleElement>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</OptionalParentSelectButton>\n\t\t\t\t</HStack>\n\t\t\t\t{ ! parentClientId && ! isChild && description && (\n\t\t\t\t\t<Text className=\"block-editor-block-card__description\">\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default BlockCard;\n"],
"mappings": "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",
"names": ["componentsPrivateApis", "deprecated", "blockEditorStore", "clsx", "VStack", "HStack", "BlockIcon", "Text"]
}