@wordpress/block-library
Version:
Block library for the WordPress editor.
8 lines (7 loc) • 6.91 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/spacer/controls.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInspectorControls,\n\tuseSettings,\n\t__experimentalSpacingSizesControl as SpacingSizesControl,\n\tisValueSpacingPreset,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useInstanceId } from '@wordpress/compose';\nimport { View } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\nimport { MIN_SPACER_SIZE } from './constants';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst { useSpacingSizes } = unlock( blockEditorPrivateApis );\n\nfunction DimensionInput( { label, onChange, isResizing, value = '' } ) {\n\tconst inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );\n\tconst spacingSizes = useSpacingSizes();\n\tconst [ spacingUnits ] = useSettings( 'spacing.units' );\n\t// In most contexts the spacer size cannot meaningfully be set to a\n\t// percentage, since this is relative to the parent container. This\n\t// unit is disabled from the UI.\n\tconst availableUnits = spacingUnits\n\t\t? spacingUnits.filter( ( unit ) => unit !== '%' )\n\t\t: [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits,\n\t\tdefaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },\n\t} );\n\n\t// Force the unit to update to `px` when the Spacer is being resized.\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( value );\n\tconst computedValue = isValueSpacingPreset( value )\n\t\t? value\n\t\t: [ parsedQuantity, isResizing ? 'px' : parsedUnit ].join( '' );\n\n\treturn (\n\t\t<>\n\t\t\t{ spacingSizes?.length < 2 ? (\n\t\t\t\t<UnitControl\n\t\t\t\t\tid={ inputId }\n\t\t\t\t\tisResetValueOnUnitChange\n\t\t\t\t\tmin={ MIN_SPACER_SIZE }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ computedValue }\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<View className=\"tools-panel-item-spacing\">\n\t\t\t\t\t<SpacingSizesControl\n\t\t\t\t\t\tvalues={ { all: computedValue } }\n\t\t\t\t\t\tonChange={ ( { all } ) => {\n\t\t\t\t\t\t\tonChange( all );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\tsides={ [ 'all' ] }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tallowReset={ false }\n\t\t\t\t\t\tsplitOnAxis={ false }\n\t\t\t\t\t\tshowSideInLabel={ false }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default function SpacerControls( {\n\tsetAttributes,\n\torientation,\n\theight,\n\twidth,\n\tisResizing,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\tresetAll={ () => {\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\twidth: undefined,\n\t\t\t\t\t\theight: '100px',\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t>\n\t\t\t\t{ orientation === 'horizontal' && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => width !== undefined }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { width: undefined } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DimensionInput\n\t\t\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\t\t\tvalue={ width }\n\t\t\t\t\t\t\tonChange={ ( nextWidth ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { width: nextWidth } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisResizing={ isResizing }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t\t{ orientation !== 'horizontal' && (\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => height !== '100px' }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { height: '100px' } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DimensionInput\n\t\t\t\t\t\t\tlabel={ __( 'Height' ) }\n\t\t\t\t\t\t\tvalue={ height }\n\t\t\t\t\t\t\tonChange={ ( nextHeight ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { height: nextHeight } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tisResizing={ isResizing }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t) }\n\t\t\t</ToolsPanel>\n\t\t</InspectorControls>\n\t);\n}\n"],
"mappings": "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",
"names": []
}