@wordpress/block-editor
Version:
8 lines (7 loc) • 12.2 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/hooks/background.js"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\nimport {\n\tdefault as StylesBackgroundPanel,\n\tuseHasBackgroundPanel,\n\thasBackgroundImageValue,\n\thasBackgroundGradientValue,\n} from '../components/global-styles/background-panel';\nimport { globalStylesDataKey } from '../store/private-keys';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\n\n// Initial control values.\nexport const BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\n/**\n * Determine whether there is block support for background.\n *\n * @param {string} blockName Block name.\n * @param {string} feature Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBackgroundSupport( blockName, feature = 'any' ) {\n\tconst support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn (\n\t\t\t!! support?.backgroundImage ||\n\t\t\t!! support?.backgroundSize ||\n\t\t\t!! support?.backgroundRepeat ||\n\t\t\t!! support?.gradient\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\nexport function setBackgroundStyleDefaults( backgroundStyle ) {\n\tif ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {\n\t\treturn;\n\t}\n\n\tlet backgroundStylesWithDefaults;\n\n\t// Set block background defaults.\n\tif ( ! backgroundStyle?.backgroundSize ) {\n\t\tbackgroundStylesWithDefaults = {\n\t\t\tbackgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,\n\t\t};\n\t}\n\n\tif (\n\t\t'contain' === backgroundStyle?.backgroundSize &&\n\t\t! backgroundStyle?.backgroundPosition\n\t) {\n\t\tbackgroundStylesWithDefaults = {\n\t\t\tbackgroundPosition:\n\t\t\t\tBACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,\n\t\t};\n\t}\n\treturn backgroundStylesWithDefaults;\n}\n\nfunction useBlockProps( { name, style } ) {\n\tif (\n\t\t! hasBackgroundSupport( name ) ||\n\t\t! style?.background?.backgroundImage\n\t) {\n\t\treturn;\n\t}\n\n\tconst backgroundStyles = setBackgroundStyleDefaults( style?.background );\n\n\tif ( ! backgroundStyles ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tstyle: {\n\t\t\t...backgroundStyles,\n\t\t},\n\t};\n}\n\n/**\n * Generates a CSS class name if an background image is set.\n *\n * @param {Object} style A block's style attribute.\n *\n * @return {string} CSS class name.\n */\nexport function getBackgroundImageClasses( style ) {\n\treturn hasBackgroundImageValue( style ) ||\n\t\thasBackgroundGradientValue( style )\n\t\t? 'has-background'\n\t\t: '';\n}\n\nfunction BackgroundInspectorControl( {\n\tchildren,\n\tbackgroundGradientSupported = false,\n} ) {\n\tconst resetAllFilter = useCallback(\n\t\t( attributes ) => {\n\t\t\tconst updatedClassName = attributes.className?.includes(\n\t\t\t\t'has-background'\n\t\t\t)\n\t\t\t\t? attributes.className\n\t\t\t\t\t\t.split( ' ' )\n\t\t\t\t\t\t.filter( ( c ) => c !== 'has-background' )\n\t\t\t\t\t\t.join( ' ' ) || undefined\n\t\t\t\t: attributes.className;\n\t\t\treturn {\n\t\t\t\t...attributes,\n\t\t\t\tclassName: updatedClassName,\n\t\t\t\tstyle: cleanEmptyObject( {\n\t\t\t\t\t...attributes.style,\n\t\t\t\t\tbackground: undefined,\n\t\t\t\t\tcolor: backgroundGradientSupported\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...attributes.style?.color,\n\t\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: attributes.style?.color,\n\t\t\t\t} ),\n\t\t\t};\n\t\t},\n\t\t[ backgroundGradientSupported ]\n\t);\n\treturn (\n\t\t<InspectorControls group=\"background\" resetAllFilter={ resetAllFilter }>\n\t\t\t{ children }\n\t\t</InspectorControls>\n\t);\n}\n\nexport function BackgroundImagePanel( {\n\tclientId,\n\tname,\n\tsetAttributes,\n\tsettings,\n} ) {\n\tconst { style, className, inheritedValue } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockAttributes, getSettings } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst _settings = getSettings();\n\t\t\tconst blockAttributes = getBlockAttributes( clientId );\n\t\t\treturn {\n\t\t\t\tstyle: blockAttributes?.style,\n\t\t\t\tclassName: blockAttributes?.className,\n\t\t\t\t/*\n\t\t\t\t * To ensure we pass down the right inherited values:\n\t\t\t\t * @TODO 1. Pass inherited value down to all block style controls,\n\t\t\t\t * See: packages/block-editor/src/hooks/style.js\n\t\t\t\t * @TODO 2. Add support for block style variations,\n\t\t\t\t * See implementation: packages/block-editor/src/hooks/block-style-variation.js\n\t\t\t\t */\n\t\t\t\tinheritedValue:\n\t\t\t\t\t_settings[ globalStylesDataKey ]?.blocks?.[ name ],\n\t\t\t};\n\t\t},\n\t\t[ clientId, name ]\n\t);\n\n\tconst backgroundGradientSupported = hasBackgroundSupport(\n\t\tname,\n\t\t'gradient'\n\t);\n\n\t// Must be declared before the early return to follow Rules of Hooks.\n\t// Passes backgroundGradientSupported so that \"Reset All\" also clears\n\t// the legacy color.gradient value when background.gradient is supported.\n\tconst as = useCallback(\n\t\t( { children } ) => (\n\t\t\t<BackgroundInspectorControl\n\t\t\t\tbackgroundGradientSupported={ backgroundGradientSupported }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</BackgroundInspectorControl>\n\t\t),\n\t\t[ backgroundGradientSupported ]\n\t);\n\n\tif (\n\t\t! useHasBackgroundPanel( settings ) ||\n\t\t! hasBackgroundSupport( name )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( newStyle ) => {\n\t\tconst isMigrating =\n\t\t\tbackgroundGradientSupported && !! style?.color?.gradient;\n\t\tconst newAttributes = {\n\t\t\tstyle: cleanEmptyObject(\n\t\t\t\tbackgroundGradientSupported\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...newStyle,\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t...newStyle?.color,\n\t\t\t\t\t\t\t\tgradient: undefined,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t }\n\t\t\t\t\t: newStyle\n\t\t\t),\n\t\t};\n\n\t\t// When migrating from color.gradient to background.gradient, preserve\n\t\t// the has-background class so existing styles relying on it (e.g.\n\t\t// theme padding) are not silently broken. Only add the class when a\n\t\t// gradient value is being set \u2014 not when it is being cleared/reset.\n\t\t// Conversely, if the gradient is cleared and has-background was added\n\t\t// during a previous migration, remove it so it does not linger.\n\t\tif ( isMigrating && !! newStyle?.background?.gradient ) {\n\t\t\tnewAttributes.className = clsx( className, 'has-background' );\n\t\t} else if (\n\t\t\t! newStyle?.background?.gradient &&\n\t\t\tclassName?.includes( 'has-background' )\n\t\t) {\n\t\t\tnewAttributes.className =\n\t\t\t\tclassName\n\t\t\t\t\t.split( ' ' )\n\t\t\t\t\t.filter( ( c ) => c !== 'has-background' )\n\t\t\t\t\t.join( ' ' ) || undefined;\n\t\t}\n\n\t\tsetAttributes( newAttributes );\n\t};\n\n\t// When background.gradient is supported but not yet explicitly set, fall\n\t// back to color.gradient for display. Any write from this panel migrates\n\t// the value to background.gradient and clears color.gradient atomically.\n\tconst styleValue =\n\t\tbackgroundGradientSupported &&\n\t\t! style?.background?.gradient &&\n\t\tstyle?.color?.gradient\n\t\t\t? {\n\t\t\t\t\t...style,\n\t\t\t\t\tbackground: {\n\t\t\t\t\t\t...style?.background,\n\t\t\t\t\t\tgradient: style?.color?.gradient,\n\t\t\t\t\t},\n\t\t\t }\n\t\t\t: style;\n\n\tconst updatedSettings = {\n\t\t...settings,\n\t\tbackground: {\n\t\t\t...settings.background,\n\t\t\tbackgroundSize:\n\t\t\t\tsettings?.background?.backgroundSize &&\n\t\t\t\thasBackgroundSupport( name, 'backgroundSize' ),\n\t\t},\n\t};\n\n\tconst defaultControls = getBlockSupport( name, [\n\t\tBACKGROUND_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\treturn (\n\t\t<StylesBackgroundPanel\n\t\t\tinheritedValue={ inheritedValue }\n\t\t\tas={ as }\n\t\t\tpanelId={ clientId }\n\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\tsettings={ updatedSettings }\n\t\t\tonChange={ onChange }\n\t\t\tdefaultControls={ defaultControls }\n\t\t\tvalue={ styleValue }\n\t\t/>\n\t);\n}\n\nexport default {\n\tuseBlockProps,\n\tattributeKeys: [ 'style' ],\n\thasSupport: hasBackgroundSupport,\n};\n"],
"mappings": "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",
"names": ["InspectorControls", "blockEditorStore", "clsx", "StylesBackgroundPanel"]
}