@wordpress/block-editor
Version:
8 lines (7 loc) • 8.78 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/hooks/align.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport {\n\tgetBlockSupport,\n\tgetBlockType,\n\thasBlockSupport,\n} from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { BlockControls, BlockAlignmentControl } from '../components';\nimport useAvailableAlignments from '../components/block-alignment-control/use-available-alignments';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\n/**\n * An array which includes all possible valid alignments,\n * used to validate if an alignment is valid or not.\n *\n * @constant\n * @type {string[]}\n */\nconst ALL_ALIGNMENTS = [ 'left', 'center', 'right', 'wide', 'full' ];\n\n/**\n * An array which includes all wide alignments.\n * In order for this alignments to be valid they need to be supported by the block,\n * and by the theme.\n *\n * @constant\n * @type {string[]}\n */\nconst WIDE_ALIGNMENTS = [ 'wide', 'full' ];\n\n/**\n * Returns the valid alignments.\n * Takes into consideration the aligns supported by a block, if the block supports wide controls or not and if theme supports wide controls or not.\n * Exported just for testing purposes, not exported outside the module.\n *\n * @param {?boolean|string[]} blockAlign Aligns supported by the block.\n * @param {?boolean} hasWideBlockSupport True if block supports wide alignments. And False otherwise.\n * @param {?boolean} hasWideEnabled True if theme supports wide alignments. And False otherwise.\n *\n * @return {string[]} Valid alignments.\n */\nexport function getValidAlignments(\n\tblockAlign,\n\thasWideBlockSupport = true,\n\thasWideEnabled = true\n) {\n\tlet validAlignments;\n\tif ( Array.isArray( blockAlign ) ) {\n\t\tvalidAlignments = ALL_ALIGNMENTS.filter( ( value ) =>\n\t\t\tblockAlign.includes( value )\n\t\t);\n\t} else if ( blockAlign === true ) {\n\t\t// `true` includes all alignments...\n\t\tvalidAlignments = [ ...ALL_ALIGNMENTS ];\n\t} else {\n\t\tvalidAlignments = [];\n\t}\n\n\tif (\n\t\t! hasWideEnabled ||\n\t\t( blockAlign === true && ! hasWideBlockSupport )\n\t) {\n\t\treturn validAlignments.filter(\n\t\t\t( alignment ) => ! WIDE_ALIGNMENTS.includes( alignment )\n\t\t);\n\t}\n\n\treturn validAlignments;\n}\n\n/**\n * Filters registered block settings, extending attributes to include `align`.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( 'type' in ( settings.attributes?.align ?? {} ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'align' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\talign: {\n\t\t\t\ttype: 'string',\n\t\t\t\t// Allow for '' since it is used by the `updateAlignment` function\n\t\t\t\t// in toolbar controls for special cases with defined default values.\n\t\t\t\tenum: [ ...ALL_ALIGNMENTS, '' ],\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\nfunction BlockEditAlignmentToolbarControlsPure( {\n\tname: blockName,\n\talign,\n\tsetAttributes,\n} ) {\n\t// Compute the block valid alignments by taking into account,\n\t// if the theme supports wide alignments or not and the layout's\n\t// available alignments. We do that for conditionally rendering\n\t// Slot.\n\tconst blockAllowedAlignments = getValidAlignments(\n\t\tgetBlockSupport( blockName, 'align' ),\n\t\thasBlockSupport( blockName, 'alignWide', true )\n\t);\n\n\tconst validAlignments = useAvailableAlignments(\n\t\tblockAllowedAlignments\n\t).map( ( { name } ) => name );\n\tconst blockEditingMode = useBlockEditingMode();\n\tif ( ! validAlignments.length || blockEditingMode !== 'default' ) {\n\t\treturn null;\n\t}\n\n\tconst updateAlignment = ( nextAlign ) => {\n\t\tif ( ! nextAlign ) {\n\t\t\tconst blockType = getBlockType( blockName );\n\t\t\tconst blockDefaultAlign = blockType?.attributes?.align?.default;\n\t\t\tif ( blockDefaultAlign ) {\n\t\t\t\tnextAlign = '';\n\t\t\t}\n\t\t}\n\t\tsetAttributes( { align: nextAlign } );\n\t};\n\n\treturn (\n\t\t<BlockControls group=\"block\" __experimentalShareWithChildBlocks>\n\t\t\t<BlockAlignmentControl\n\t\t\t\tvalue={ align }\n\t\t\t\tonChange={ updateAlignment }\n\t\t\t\tcontrols={ validAlignments }\n\t\t\t/>\n\t\t</BlockControls>\n\t);\n}\n\nexport default {\n\tshareWithChildBlocks: true,\n\tedit: BlockEditAlignmentToolbarControlsPure,\n\tuseBlockProps,\n\taddSaveProps: addAssignedAlign,\n\tattributeKeys: [ 'align' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'align', false );\n\t},\n};\n\nfunction useBlockProps( { name, align } ) {\n\tconst blockAllowedAlignments = getValidAlignments(\n\t\tgetBlockSupport( name, 'align' ),\n\t\thasBlockSupport( name, 'alignWide', true )\n\t);\n\tconst validAlignments = useAvailableAlignments( blockAllowedAlignments );\n\n\tif ( validAlignments.some( ( alignment ) => alignment.name === align ) ) {\n\t\treturn { 'data-align': align };\n\t}\n\n\treturn {};\n}\n\n/**\n * Override props assigned to save component to inject alignment class name if\n * block supports it.\n *\n * @param {Object} props Additional props applied to save element.\n * @param {Object} blockType Block type.\n * @param {Object} attributes Block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addAssignedAlign( props, blockType, attributes ) {\n\tconst { align } = attributes;\n\tconst blockAlign = getBlockSupport( blockType, 'align' );\n\tconst hasWideBlockSupport = hasBlockSupport( blockType, 'alignWide', true );\n\n\t// Compute valid alignments without taking into account if\n\t// the theme supports wide alignments or not.\n\t// This way changing themes does not impact the block save.\n\tconst isAlignValid = getValidAlignments(\n\t\tblockAlign,\n\t\thasWideBlockSupport\n\t).includes( align );\n\tif ( isAlignValid ) {\n\t\tprops.className = clsx( `align${ align }`, props.className );\n\t}\n\n\treturn props;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/editor/align/addAttribute',\n\taddAttribute\n);\n"],
"mappings": "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",
"names": ["useAvailableAlignments", "clsx"]
}