Add support for button elements to theme.json (#40260)

* Add button component for blocks * Add button component for blocks * also use the blockbutton for the search block * update search block icon button * Rename to ElementButton * Add content version of the component * refactor to remove duplicate code * linting fix * Add a deprecation * Move code to 6.1 version of theme.json * also output a button rather than richtext, when children are present * adding missing file * ignore lint * Add the wp-block-button class to the element selector * update fixtures * linting fix' * remove disconnected change * Remove ElementButton component and replace with a const * use a hook to supply the element button class * use the same class name in the search button server side render * simply to just use a const * add documentation * remove unneeded code * remove unneeded code * also make button a selector * remove unneeded changes * Expose the classname const from block editor package * Update packages/block-library/src/button/deprecated.js Co-authored-by: Adam Zielinski <[email protected]> * update button element const * Make the const all uppercase * fix spacing * update snapshots * add test Co-authored-by: Dave Smith <[email protected]> Co-authored-by: Adam Zielinski <[email protected]>
WordPress · May 20, 2022 · 046ca65 · 046ca65
1 parent 323174a
commit 046ca65
Show file tree

Hide file tree

Showing 27 changed files with 204 additions and 36 deletions.
diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php b/lib/compat/wordpress-6.0/class-wp-theme-json-6-0.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * WP_Theme_JSON_Gutenberg class
+ * WP_Theme_JSON_6_0 class
  *
  * @package gutenberg
  */

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
@@ -1,6 +1,6 @@
 <?php
 /**
- * WP_Theme_JSON_Gutenberg class
+ * WP_Theme_JSON_6_1 class
  *
  * @package gutenberg
  */
@@ -15,6 +15,18 @@
  * @access private
  */
 class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
+	const __EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button';
+
+	const ELEMENTS = array(
+		'link'   => 'a',
+		'h1'     => 'h1',
+		'h2'     => 'h2',
+		'h3'     => 'h3',
+		'h4'     => 'h4',
+		'h5'     => 'h5',
+		'h6'     => 'h6',
+		'button' => '.wp-element-button, .wp-block-button, button', // We have the .wp-block-button class so that this will target older buttons that have been serialized.
+	);
 	/**
 	 * Returns the metadata for each block.
 	 *

diff --git a/packages/block-editor/src/elements/index.js b/packages/block-editor/src/elements/index.js
@@ -0,0 +1 @@
+export const __experimentalElementButtonClassName = 'wp-element-button';
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
@@ -13,6 +13,7 @@ export {
 	useCachedTruthy,
 } from './hooks';
 export * from './components';
+export * from './elements';
 export * from './utils';
 export { storeConfig, store } from './store';
 export { SETTINGS_DEFAULTS } from './store/defaults';
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
@@ -119,6 +119,150 @@ const blockAttributes = {
 	},
 };
 
+const v11 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'title',
+		},
+		text: {
+			type: 'string',
+			source: 'html',
+			selector: 'a',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button__link',
+	},
+	save( { attributes, className } ) {
+		const {
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		if ( ! text ) {
+			return null;
+		}
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const buttonClasses = classnames(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			}
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = classnames( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ linkTarget }
+					rel={ rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v10 = {
 	attributes: {
 		url: {
@@ -258,6 +402,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v11,
 	v10,
 	{
 		supports: {

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -25,6 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -176,7 +177,8 @@ function ButtonEdit( props ) {
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
-						}
+						},
+						__experimentalElementButtonClassName
 					) }
 					style={ {
 						...borderProps.style,

diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js
@@ -12,6 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -41,7 +42,8 @@ export default function save( { attributes, className } ) {
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
-		}
+		},
+		__experimentalElementButtonClassName
 	);
 	const buttonStyle = {
 		...borderProps.style,

diff --git a/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap
@@ -21,7 +21,7 @@ exports[`Buttons block justify content sets Justify items right option 1`] = `
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js
@@ -32,7 +32,7 @@ describe( 'Buttons block', () => {
 		it( 'adjusts the border radius', async () => {
 			const initialHtml = `<!-- wp:buttons -->
 			<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-			<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
+			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
 			const { getByA11yLabel } = await initializeEditor( {

diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
@@ -14,6 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -241,7 +242,8 @@ export default function SearchEdit( {
 			'wp-block-search__button',
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
-			buttonUseIcon ? 'has-icon' : undefined
+			buttonUseIcon ? 'has-icon' : undefined,
+			__experimentalElementButtonClassName
 		);
 		const buttonStyles = {
 			...colorProps.style,

diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -101,6 +101,9 @@ function render_block_core_search( $attributes ) {
 				</svg>';
 		}
 
+		// Include the button element class.
+		$button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME;
+
 		$button_markup = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
 			esc_attr( $button_classes ),

diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/buttons.test.js.snap
@@ -3,31 +3,31 @@
 exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons has focus on button content (slash inserter) 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
 
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
@@ -108,7 +108,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 exports[`Inserting blocks inserts blocks at root level when using the root appender while selection is in an inner block 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">1.1</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">1.1</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->
 

diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__button__border_radius__deprecated-2.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"className":"is-style-outline","style":{"border":{"radius":"10px"},"color":{"text":"#1b9b6c"}}} -->
-<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="border-radius:10px;color:#1b9b6c">Where We Are</a></div>
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color wp-element-button" style="border-radius:10px;color:#1b9b6c">Where We Are</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__button__border_radius__deprecated.serialized.html b/test/integration/fixtures/blocks/core__button__border_radius__deprecated.serialized.html
@@ -1,5 +1,5 @@
 <!-- wp:button {"style":{"border":{"radius":"25px"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:25px">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:25px">My button</a></div>
 <!-- /wp:button -->
 
 
diff --git a/test/integration/fixtures/blocks/core__button__center__deprecated.serialized.html b/test/integration/fixtures/blocks/core__button__center__deprecated.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"align":"center"} -->
-<div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
+<div class="wp-block-button aligncenter"><a class="wp-block-button__link wp-element-button" href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v10.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"fontFamily":"cambria-georgia"} -->
-<div class="wp-block-button has-cambria-georgia-font-family"><a class="wp-block-button__link">My button</a></div>
+<div class="wp-block-button has-cambria-georgia-font-family"><a class="wp-block-button__link wp-element-button">My button</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__button__squared.html b/test/integration/fixtures/blocks/core__button__squared.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link no-border-radius has-text-color has-background" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link no-border-radius has-text-color has-background wp-element-button" style="background-color:#aa5a20;color:#1b9b6c">My button</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__button__squared.parsed.json b/test/integration/fixtures/blocks/core__button__squared.parsed.json
@@ -13,9 +13,9 @@
 			}
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n",
+		"innerHTML": "\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background wp-element-button\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n"
+			"\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link no-border-radius has-text-color has-background wp-element-button\" style=\"background-color:#aa5a20;color:#1b9b6c\">My button</a></div>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__button__squared.serialized.html b/test/integration/fixtures/blocks/core__button__squared.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:button {"style":{"border":{"radius":0},"color":{"text":"#1b9b6c","background":"#aa5a20"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="color:#1b9b6c;background-color:#aa5a20">My button</a></div>
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background no-border-radius wp-element-button" style="color:#1b9b6c;background-color:#aa5a20">My button</a></div>
 <!-- /wp:button -->
diff --git a/test/integration/fixtures/blocks/core__buttons.html b/test/integration/fixtures/blocks/core__buttons.html
@@ -1,11 +1,11 @@
 <!-- wp:buttons {"align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
 <div class="wp-block-buttons alignwide">
 	<!-- wp:button -->
-	<div class="wp-block-button"><a class="wp-block-button__link">My button 1</a></div>
+	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 1</a></div>
 	<!-- /wp:button -->
 
 	<!-- wp:button -->
-	<div class="wp-block-button"><a class="wp-block-button__link">My button 2</a></div>
+	<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
 	<!-- /wp:button -->
 </div>
-<!-- /wp:buttons -->
+<!-- /wp:buttons -->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const __experimentalElementButtonClassName = 'wp-element-button';