diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 3308b98d28169..c0e5c1b5f8bb8 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -15,3 +15,4 @@ import './layout'; export { useCustomSides } from './spacing'; export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; +export { getSpacingClassesAndStyles } from './use-spacing-props'; diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index 11dbe0a30e4c9..b0aac50354da6 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -11,3 +11,4 @@ import './font-size'; export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; +export { getSpacingClassesAndStyles } from './use-spacing-props'; diff --git a/packages/block-editor/src/hooks/use-spacing-props.js b/packages/block-editor/src/hooks/use-spacing-props.js new file mode 100644 index 0000000000000..35fe87c1e5ec4 --- /dev/null +++ b/packages/block-editor/src/hooks/use-spacing-props.js @@ -0,0 +1,28 @@ +/** + * Internal dependencies + */ +import { getInlineStyles } from './style'; + +// This utility is intended to assist where the serialization of the spacing +// block support is being skipped for a block but the spacing related CSS +// styles still need to be generated so they can be applied to inner elements. + +/** + * Provides the CSS class names and inline styles for a block's spacing support + * attributes. + * + * @param {Object} attributes Block attributes. + * + * @return {Object} Spacing block support derived CSS classes & styles. + */ +export function getSpacingClassesAndStyles( attributes ) { + const { style } = attributes; + + // Collect inline styles for spacing. + const spacingStyles = style?.spacing || {}; + const styleProp = getInlineStyles( { spacing: spacingStyles } ); + + return { + style: styleProp, + }; +} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 1e567a9c295af..2720c2cd4c958 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -8,6 +8,7 @@ export { getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, useColorProps as __experimentalUseColorProps, useCustomSides as __experimentalUseCustomSides, + getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles, } from './hooks'; export * from './components'; export * from './utils'; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index f2e4a52debd81..d954cc3c40e99 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -66,6 +66,10 @@ "__experimentalFontFamily": true }, "reusable": false, + "spacing": { + "__experimentalSkipSerialization": true, + "padding": true + }, "__experimentalBorder": { "radius": true, "__experimentalSkipSerialization": true diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 079185d8e2e39..c0f80bc40ae0d 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -25,6 +25,7 @@ import { useBlockProps, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, + __experimentalGetSpacingClassesAndStyles as useSpacingProps, __experimentalLinkControl as LinkControl, } from '@wordpress/block-editor'; import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; @@ -199,6 +200,7 @@ function ButtonEdit( props ) { const borderProps = useBorderProps( attributes ); const colorProps = useColorProps( attributes ); + const spacingProps = useSpacingProps( attributes ); const ref = useRef(); const blockProps = useBlockProps( { ref } ); @@ -231,6 +233,7 @@ function ButtonEdit( props ) { style={ { ...borderProps.style, ...colorProps.style, + ...spacingProps.style, } } onSplit={ ( value ) => createBlock( 'core/button', { diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index d462cf52e6dd7..1910044f9529a 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -11,6 +11,7 @@ import { useBlockProps, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, + __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, } from '@wordpress/block-editor'; export default function save( { attributes, className } ) { @@ -31,6 +32,7 @@ export default function save( { attributes, className } ) { const borderProps = getBorderClassesAndStyles( attributes ); const colorProps = getColorClassesAndStyles( attributes ); + const spacingProps = getSpacingClassesAndStyles( attributes ); const buttonClasses = classnames( 'wp-block-button__link', colorProps.className, @@ -44,6 +46,7 @@ export default function save( { attributes, className } ) { const buttonStyle = { ...borderProps.style, ...colorProps.style, + ...spacingProps.style, }; // The use of a `title` attribute here is soft-deprecated, but still applied