[Button Block]: Add padding block support (#31774)

* Add a utility for getting the spacing inline styles
* Add padding support to the Button block

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';

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';

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,
+	};
+}

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';

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

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', {

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