Elements: Add an API make it easier to get class names

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -15,8 +15,6 @@
  * @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',
@@ -27,6 +25,24 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 		'h6'     => 'h6',
 		'button' => '.wp-element-button, .wp-block-button__link', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
 	);
+
+	const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
+		'button' => 'wp-element-button',
+	);
+
+	/**
+	 * Given an element name, returns a class name.
+	 *
+	 * @param string $element The name of the element.
+	 *
+	 * @return string The name of the class.
+	 *
+	 * @since 6.1.0
+	 */
+	public static function get_element_class_name( $element ) {
+		return array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ? static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ] : '';
+	}
+
 	/**
 	 * Returns the metadata for each block.
 	 *

packages/block-editor/src/elements/index.js

@@ -1 +1,7 @@
-export const __experimentalElementButtonClassName = 'wp-element-button';
+const ELEMENT_CLASS_NAMES = {
+	button: 'wp-element-button',
+};
+
+export const __experimentalGetElementClassName = ( element ) => {
+	return ELEMENT_CLASS_NAMES[ element ] ? ELEMENT_CLASS_NAMES[ element ] : '';
+};

packages/block-editor/src/elements/test/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalGetElementClassName } from '@wordpress/block-editor';
+
+describe( 'element class names', () => {
+	it( 'should return the correct class name for button', () => {
+		expect( __experimentalGetElementClassName( 'button' ) ).toEqual(
+			'wp-element-button'
+		);
+	} );
+
+	it( 'should return an empty string for an unknown element', () => {
+		expect(
+			__experimentalGetElementClassName( 'unknown-element' )
+		).toEqual( '' );
+	} );
+} );

packages/block-library/src/button/edit.js

@@ -25,7 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -172,7 +172,7 @@ function ButtonEdit( props ) {
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
 						},
-						__experimentalElementButtonClassName
+						__experimentalGetElementClassName( 'button' )
 					) }
 					style={ {
 						...borderProps.style,

packages/block-library/src/button/save.js

@@ -12,7 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -35,7 +35,7 @@ export default function save( { attributes, className } ) {
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
 		},
-		__experimentalElementButtonClassName
+		__experimentalGetElementClassName( 'button' )
 	);
 	const buttonStyle = {
 		...borderProps.style,

packages/block-library/src/file/edit.js

@@ -22,7 +22,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -302,7 +302,9 @@ function FileEdit( {
 								aria-label={ __( 'Download button text' ) }
 								className={ classnames(
 									'wp-block-file__button',
-									__experimentalElementButtonClassName
+									__experimentalGetElementClassName(
+										'button'
+									)
 								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting

packages/block-library/src/file/save.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -74,7 +74,7 @@ export default function save( { attributes } ) {
 						href={ href }
 						className={ classnames(
 							'wp-block-file__button',
-							__experimentalElementButtonClassName
+							__experimentalGetElementClassName( 'button' )
 						) }
 						download={ true }
 						aria-describedby={ describedById }

packages/block-library/src/post-comments-form/form.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { __experimentalElementButtonClassName } from '@wordpress/block-editor';
+import { __experimentalGetElementClassName } from '@wordpress/block-editor';
 import { useDisabled, useInstanceId } from '@wordpress/compose';
 
 const CommentsForm = () => {
@@ -36,7 +36,7 @@ const CommentsForm = () => {
 						className={ classnames(
 							'submit',
 							'wp-block-button__link',
-							__experimentalElementButtonClassName
+							__experimentalGetElementClassName( 'button' )
 						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }

packages/block-library/src/post-comments-form/index.php

@@ -72,7 +72,7 @@ function register_block_core_post_comments_form() {
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

packages/block-library/src/post-comments/index.php

@@ -78,7 +78,7 @@ function register_block_core_post_comments() {
  */
 function post_comments_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="%3$s wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

packages/block-library/src/search/edit.js

@@ -14,7 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -241,7 +241,7 @@ export default function SearchEdit( {
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
 			buttonUseIcon ? 'has-icon' : undefined,
-			__experimentalElementButtonClassName
+			__experimentalGetElementClassName( 'button' )
 		);
 		const buttonStyles = {
 			...colorProps.style,

packages/block-library/src/search/index.php

@@ -105,9 +105,8 @@ function render_block_core_search( $attributes ) {
 		}
 
 		// Include the button element class.
-		$button_classes[] = WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME;
-
-		$button_markup = sprintf(
+		$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+		$button_markup    = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
 			esc_attr( implode( ' ', $button_classes ) ),
 			$inline_styles['button'],

phpunit/class-wp-theme-json-test.php

@@ -2503,4 +2503,18 @@ function test_export_data_sets_appearance_tools() {
 
 		$this->assertEqualSetsWithIndex( $expected, $actual );
 	}
+
+	function test_get_element_class_name_button() {
+		$expected = 'wp-element-button';
+		$actual   = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+
+		$this->assertEquals( $expected, $actual );
+	}
+
+	function test_get_element_class_name_invalid() {
+		$expected = '';
+		$actual   = WP_Theme_JSON_Gutenberg::get_element_class_name( 'unknown-element' );
+
+		$this->assertEquals( $expected, $actual );
+	}
 }