From 569389a1b071d801df79469264335a8d6a9a289f Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 12 Apr 2022 09:58:07 +0100 Subject: [PATCH 01/33] Add button component for blocks --- .../wordpress-6.0/class-wp-theme-json-6-0.php | 11 ++++++++++ packages/block-editor/README.md | 4 ++++ .../src/components/block-button/index.js | 22 +++++++++++++++++++ packages/block-editor/src/components/index.js | 1 + packages/block-library/src/button/edit.js | 4 ++-- packages/block-library/src/button/save.js | 5 +++-- 6 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 packages/block-editor/src/components/block-button/index.js 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 index 1a0945b175422..347b57c1f2325 100644 --- 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 @@ -67,6 +67,17 @@ class WP_Theme_JSON_6_0 extends WP_Theme_JSON_5_9 { 'filter' => array( 'filter', 'duotone' ), ); + const ELEMENTS = array( + 'link' => 'a', + 'h1' => 'h1', + 'h2' => 'h2', + 'h3' => 'h3', + 'h4' => 'h4', + 'h5' => 'h5', + 'h6' => 'h6', + 'button' => '.wp-element-button', + ); + /** * Presets are a set of values that serve * to bootstrap some styles: colors, font sizes, etc. diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 57820884bb20d..c5dd42ba98793 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -121,6 +121,10 @@ _Returns_ - `WPElement`: Block Breadcrumb. +### BlockButton + +Undocumented declaration. + ### BlockColorsStyleSelector Undocumented declaration. diff --git a/packages/block-editor/src/components/block-button/index.js b/packages/block-editor/src/components/block-button/index.js new file mode 100644 index 0000000000000..4333d4156a29e --- /dev/null +++ b/packages/block-editor/src/components/block-button/index.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ + import { Component } from '@wordpress/element'; + + /** + * Internal dependencies + */ + import RichText from '../rich-text'; + +export default class BlockButton extends Component { + render() { + const newProps = { ...this.props }; + newProps.className += ' wp-element-button'; + + if ( this.props.frontEnd ) { + return ; + } + + return ; + } +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 43448fdae43b7..e47e9b7937ca5 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -15,6 +15,7 @@ export { default as __experimentalBlockFullHeightAligmentControl } from './block export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control'; export { default as BlockBreadcrumb } from './block-breadcrumb'; export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay'; +export { default as BlockButton } from './block-button'; export { BlockContextProvider } from './block-context'; export { default as BlockControls, diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 585fd1ec0101a..81b810ee5cd05 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -19,7 +19,7 @@ import { import { BlockControls, InspectorControls, - RichText, + BlockButton, useBlockProps, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, @@ -160,7 +160,7 @@ function ButtonEdit( props ) { [ `has-custom-font-size` ]: blockProps.style.fontSize, } ) } > - - Date: Tue, 12 Apr 2022 09:58:35 +0100 Subject: [PATCH 02/33] Add button component for blocks --- .../block-editor/src/components/block-button/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-button/index.js b/packages/block-editor/src/components/block-button/index.js index 4333d4156a29e..3707f63ff1c8b 100644 --- a/packages/block-editor/src/components/block-button/index.js +++ b/packages/block-editor/src/components/block-button/index.js @@ -1,12 +1,12 @@ /** * WordPress dependencies */ - import { Component } from '@wordpress/element'; +import { Component } from '@wordpress/element'; - /** - * Internal dependencies - */ - import RichText from '../rich-text'; +/** + * Internal dependencies + */ +import RichText from '../rich-text'; export default class BlockButton extends Component { render() { From 499499690bd4c2e9fc04f4c88b5457476664df3e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 12 Apr 2022 13:13:19 +0100 Subject: [PATCH 03/33] also use the blockbutton for the search block --- packages/block-library/src/search/edit.js | 5 +++-- packages/block-library/src/search/index.php | 3 +++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index ad64b556556a6..7a4ee4071efa4 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -8,6 +8,7 @@ import classnames from 'classnames'; */ import { useBlockProps, + BlockButton, BlockControls, InspectorControls, RichText, @@ -252,7 +253,7 @@ export default function SearchEdit( { return ( <> - { buttonUseIcon && ( + { buttonUseIcon && ( // TODO ', esc_attr( $button_classes ), From 533a32b1791d1bc22cc8454e6aa5bdab648f5d1b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 12 Apr 2022 13:34:27 +0100 Subject: [PATCH 04/33] update search block icon button --- packages/block-editor/src/components/block-button/index.js | 5 +++++ packages/block-library/src/search/edit.js | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-button/index.js b/packages/block-editor/src/components/block-button/index.js index 3707f63ff1c8b..3facf06faefa9 100644 --- a/packages/block-editor/src/components/block-button/index.js +++ b/packages/block-editor/src/components/block-button/index.js @@ -13,6 +13,11 @@ export default class BlockButton extends Component { const newProps = { ...this.props }; newProps.className += ' wp-element-button'; + // If children are set then we only need a button, not RichText. + if ( newProps.children ) { + return + ) } { ! buttonUseIcon && ( From 353a149536dc0792d47745a768422008c19ff986 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 22 Apr 2022 11:47:40 +0100 Subject: [PATCH 05/33] Rename to ElementButton --- .../wordpress-6.0/class-wp-theme-json-6-0.php | 13 +------------ .../class-wp-theme-json-gutenberg.php | 15 +++++++++++++++ packages/block-editor/README.md | 8 ++++---- .../{block-button => element-button}/index.js | 2 +- packages/block-editor/src/components/index.js | 2 +- packages/block-library/src/button/edit.js | 4 ++-- packages/block-library/src/button/save.js | 4 ++-- packages/block-library/src/search/edit.js | 8 ++++---- 8 files changed, 30 insertions(+), 26 deletions(-) rename packages/block-editor/src/components/{block-button => element-button}/index.js (90%) 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 index 347b57c1f2325..77d731b9d4544 100644 --- 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 @@ array( 'filter', 'duotone' ), ); - const ELEMENTS = array( - 'link' => 'a', - 'h1' => 'h1', - 'h2' => 'h2', - 'h3' => 'h3', - 'h4' => 'h4', - 'h5' => 'h5', - 'h6' => 'h6', - 'button' => '.wp-element-button', - ); - /** * Presets are a set of values that serve * to bootstrap some styles: colors, font sizes, etc. diff --git a/lib/experimental/class-wp-theme-json-gutenberg.php b/lib/experimental/class-wp-theme-json-gutenberg.php index 3d6bf949e7f83..d80bf965de4d7 100644 --- a/lib/experimental/class-wp-theme-json-gutenberg.php +++ b/lib/experimental/class-wp-theme-json-gutenberg.php @@ -14,6 +14,21 @@ * * @access private */ +<<<<<<< HEAD class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_1 { +======= +class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_6_0 { + + const ELEMENTS = array( + 'link' => 'a', + 'h1' => 'h1', + 'h2' => 'h2', + 'h3' => 'h3', + 'h4' => 'h4', + 'h5' => 'h5', + 'h6' => 'h6', + 'button' => '.wp-element-button', + ); +>>>>>>> 3236c0a7f9 (Rename to ElementButton) } diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index c5dd42ba98793..26ea6deda944e 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -121,10 +121,6 @@ _Returns_ - `WPElement`: Block Breadcrumb. -### BlockButton - -Undocumented declaration. - ### BlockColorsStyleSelector Undocumented declaration. @@ -351,6 +347,10 @@ _Returns_ Undocumented declaration. +### ElementButton + +Undocumented declaration. + ### FontSizePicker _Related_ diff --git a/packages/block-editor/src/components/block-button/index.js b/packages/block-editor/src/components/element-button/index.js similarity index 90% rename from packages/block-editor/src/components/block-button/index.js rename to packages/block-editor/src/components/element-button/index.js index 3facf06faefa9..bd221be4f9f33 100644 --- a/packages/block-editor/src/components/block-button/index.js +++ b/packages/block-editor/src/components/element-button/index.js @@ -8,7 +8,7 @@ import { Component } from '@wordpress/element'; */ import RichText from '../rich-text'; -export default class BlockButton extends Component { +export default class ElementButton extends Component { render() { const newProps = { ...this.props }; newProps.className += ' wp-element-button'; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index e47e9b7937ca5..2a49ea974de04 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -14,8 +14,8 @@ export { export { default as __experimentalBlockFullHeightAligmentControl } from './block-full-height-alignment-control'; export { default as __experimentalBlockAlignmentMatrixControl } from './block-alignment-matrix-control'; export { default as BlockBreadcrumb } from './block-breadcrumb'; +export { default as ElementButton } from './element-button'; export { default as __experimentalUseBlockOverlayActive } from './block-content-overlay'; -export { default as BlockButton } from './block-button'; export { BlockContextProvider } from './block-context'; export { default as BlockControls, diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 81b810ee5cd05..65ad5c8361e54 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -19,7 +19,7 @@ import { import { BlockControls, InspectorControls, - BlockButton, + ElementButton, useBlockProps, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, @@ -160,7 +160,7 @@ function ButtonEdit( props ) { [ `has-custom-font-size` ]: blockProps.style.fontSize, } ) } > - - { buttonUseIcon && ( - - + ) } { ! buttonUseIcon && ( - Date: Fri, 22 Apr 2022 12:09:27 +0100 Subject: [PATCH 06/33] Add content version of the component --- .../src/components/element-button/index.js | 10 ++++++---- packages/block-library/src/button/save.js | 3 +-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/element-button/index.js b/packages/block-editor/src/components/element-button/index.js index bd221be4f9f33..5a9b97db3185c 100644 --- a/packages/block-editor/src/components/element-button/index.js +++ b/packages/block-editor/src/components/element-button/index.js @@ -18,10 +18,12 @@ export default class ElementButton extends Component { return ) } { ! buttonUseIcon && ( Date: Fri, 13 May 2022 12:15:21 +0100 Subject: [PATCH 19/33] use a hook to supply the element button class --- lib/compat/wordpress-6.1/blocks.php | 8 +++++++ .../wordpress-6.1/class-wp-theme-json-6-1.php | 23 ++++++++++--------- packages/block-editor/README.md | 4 ++++ packages/block-editor/src/elements/index.js | 19 +++++++++++++++ packages/block-library/src/button/edit.js | 4 ++-- packages/block-library/src/button/save.js | 4 ++-- packages/block-library/src/search/edit.js | 7 ++++-- .../provider/use-block-editor-settings.js | 1 + 8 files changed, 53 insertions(+), 17 deletions(-) diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index 85e124306161a..9263fa0fa52d2 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -158,3 +158,11 @@ function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) { return $metadata; } add_filter( 'block_type_metadata', 'gutenberg_block_type_metadata_multiple_view_scripts' ); + +add_filter( + 'block_editor_settings_all', + function( $settings ) { + $settings['elementButtonClassName'] = WP_THEME_JSON_GUTENBERG::ELEMENT_BUTTON_CLASS_NAME; + return $settings; + } +); 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 index c96ad48384634..6fa587ad2f54f 100644 --- 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 @@ -15,6 +15,18 @@ * @access private */ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { + const 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', // We have the .wp-block-button class so that this will target older buttons that have been serialized. + ); /** * Returns the metadata for each block. * @@ -87,15 +99,4 @@ protected static function get_blocks_metadata() { return static::$blocks_metadata; } - - const ELEMENTS = array( - 'link' => 'a', - 'h1' => 'h1', - 'h2' => 'h2', - 'h3' => 'h3', - 'h4' => 'h4', - 'h5' => 'h5', - 'h6' => 'h6', - 'button' => '.wp-element-button, .wp-block-button', // We have the .wp-block-button class so that this will target older buttons that have been serialized. - ); } diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index ea9e184df26d9..99c1496f3af2d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -746,6 +746,10 @@ _Returns_ - `any`: value +### useElementButtonClassName + +Undocumented declaration. + ### useInnerBlocksProps This hook is used to lightly mark an element as an inner blocks wrapper diff --git a/packages/block-editor/src/elements/index.js b/packages/block-editor/src/elements/index.js index 080ab2d48658d..a0eac716099f3 100644 --- a/packages/block-editor/src/elements/index.js +++ b/packages/block-editor/src/elements/index.js @@ -1 +1,20 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { store } from '../store'; + export const ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; + +export function useElementButtonClassName() { + return useSelect( ( select ) => { + return select( store ).getSettings().elementButtonClassName; + } ); +} + +// This should also come from settings. +useElementButtonClassName.save = 'wp-element-button'; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 7eb5c6de4bd18..981ead2d13e50 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -21,11 +21,11 @@ import { InspectorControls, RichText, useBlockProps, + useElementButtonClassName, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, __experimentalGetSpacingClassesAndStyles as useSpacingProps, __experimentalLinkControl as LinkControl, - ELEMENT_BUTTON_CLASS_NAME, } from '@wordpress/block-editor'; import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; @@ -178,7 +178,7 @@ function ButtonEdit( props ) { // provided via block support. 'no-border-radius': style?.border?.radius === 0, }, - ELEMENT_BUTTON_CLASS_NAME + useElementButtonClassName() ) } style={ { ...borderProps.style, diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index 57c430f815502..ba0e7f563c248 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -9,10 +9,10 @@ import classnames from 'classnames'; import { RichText, useBlockProps, + useElementButtonClassName, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, - ELEMENT_BUTTON_CLASS_NAME, } from '@wordpress/block-editor'; export default function save( { attributes, className } ) { @@ -43,7 +43,7 @@ export default function save( { attributes, className } ) { // block support. 'no-border-radius': style?.border?.radius === 0, }, - ELEMENT_BUTTON_CLASS_NAME + useElementButtonClassName.save ); const buttonStyle = { ...borderProps.style, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1448fe038506c..14293a749308b 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -8,13 +8,13 @@ import classnames from 'classnames'; */ import { useBlockProps, + useElementButtonClassName, BlockControls, InspectorControls, RichText, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, store as blockEditorStore, - ELEMENT_BUTTON_CLASS_NAME, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; @@ -93,6 +93,7 @@ export default function SearchEdit( { const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); + useEffect( () => { if ( ! insertedInNavigationBlock ) return; // This side-effect should not create an undo level. @@ -236,6 +237,8 @@ export default function SearchEdit( { ); }; + const elementButtonClassName = useElementButtonClassName(); + const renderButton = () => { // If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button. const buttonClasses = classnames( @@ -243,7 +246,7 @@ export default function SearchEdit( { colorProps.className, isButtonPositionInside ? undefined : borderProps.className, buttonUseIcon ? 'has-icon' : undefined, - ELEMENT_BUTTON_CLASS_NAME + elementButtonClassName, ); const buttonStyles = { ...colorProps.style, diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index 0b52f841ece11..bc209843d7dd4 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -131,6 +131,7 @@ function useBlockEditorSettings( settings, hasTemplate ) { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', + 'elementButtonClassName', 'enableCustomLineHeight', 'enableCustomSpacing', 'enableCustomUnits', From 6c36cb3061f3f5e5897fd28d64f893c52e6b23d9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 12:23:13 +0100 Subject: [PATCH 20/33] use the same class name in the search button server side render --- packages/block-library/src/search/edit.js | 2 +- packages/block-library/src/search/index.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 14293a749308b..77053f6233037 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -246,7 +246,7 @@ export default function SearchEdit( { colorProps.className, isButtonPositionInside ? undefined : borderProps.className, buttonUseIcon ? 'has-icon' : undefined, - elementButtonClassName, + elementButtonClassName ); const buttonStyles = { ...colorProps.style, diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 3b79b621be9a4..9f988b120b440 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -102,7 +102,7 @@ function render_block_core_search( $attributes ) { } // Include the button element class. - $button_classes .= ' wp-element-button'; + $button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::ELEMENT_BUTTON_CLASS_NAME; $button_markup = sprintf( '', From cf569c79840e82c752a9b2747c4307fa06254cdb Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 14:23:12 +0100 Subject: [PATCH 21/33] simply to just use a const --- packages/block-editor/README.md | 4 ---- packages/block-editor/src/elements/index.js | 19 ------------------- packages/block-library/src/button/edit.js | 4 ++-- packages/block-library/src/button/save.js | 4 ++-- packages/block-library/src/search/edit.js | 7 ++----- 5 files changed, 6 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 99c1496f3af2d..ea9e184df26d9 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -746,10 +746,6 @@ _Returns_ - `any`: value -### useElementButtonClassName - -Undocumented declaration. - ### useInnerBlocksProps This hook is used to lightly mark an element as an inner blocks wrapper diff --git a/packages/block-editor/src/elements/index.js b/packages/block-editor/src/elements/index.js index a0eac716099f3..080ab2d48658d 100644 --- a/packages/block-editor/src/elements/index.js +++ b/packages/block-editor/src/elements/index.js @@ -1,20 +1 @@ -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import { store } from '../store'; - export const ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; - -export function useElementButtonClassName() { - return useSelect( ( select ) => { - return select( store ).getSettings().elementButtonClassName; - } ); -} - -// This should also come from settings. -useElementButtonClassName.save = 'wp-element-button'; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 981ead2d13e50..7eb5c6de4bd18 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -21,11 +21,11 @@ import { InspectorControls, RichText, useBlockProps, - useElementButtonClassName, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, __experimentalGetSpacingClassesAndStyles as useSpacingProps, __experimentalLinkControl as LinkControl, + ELEMENT_BUTTON_CLASS_NAME, } from '@wordpress/block-editor'; import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; @@ -178,7 +178,7 @@ function ButtonEdit( props ) { // provided via block support. 'no-border-radius': style?.border?.radius === 0, }, - useElementButtonClassName() + ELEMENT_BUTTON_CLASS_NAME ) } style={ { ...borderProps.style, diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index ba0e7f563c248..57c430f815502 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -9,10 +9,10 @@ import classnames from 'classnames'; import { RichText, useBlockProps, - useElementButtonClassName, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, + ELEMENT_BUTTON_CLASS_NAME, } from '@wordpress/block-editor'; export default function save( { attributes, className } ) { @@ -43,7 +43,7 @@ export default function save( { attributes, className } ) { // block support. 'no-border-radius': style?.border?.radius === 0, }, - useElementButtonClassName.save + ELEMENT_BUTTON_CLASS_NAME ); const buttonStyle = { ...borderProps.style, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 77053f6233037..1448fe038506c 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -8,13 +8,13 @@ import classnames from 'classnames'; */ import { useBlockProps, - useElementButtonClassName, BlockControls, InspectorControls, RichText, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, store as blockEditorStore, + ELEMENT_BUTTON_CLASS_NAME, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; @@ -93,7 +93,6 @@ export default function SearchEdit( { const { __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); - useEffect( () => { if ( ! insertedInNavigationBlock ) return; // This side-effect should not create an undo level. @@ -237,8 +236,6 @@ export default function SearchEdit( { ); }; - const elementButtonClassName = useElementButtonClassName(); - const renderButton = () => { // If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button. const buttonClasses = classnames( @@ -246,7 +243,7 @@ export default function SearchEdit( { colorProps.className, isButtonPositionInside ? undefined : borderProps.className, buttonUseIcon ? 'has-icon' : undefined, - elementButtonClassName + ELEMENT_BUTTON_CLASS_NAME ); const buttonStyles = { ...colorProps.style, From c10501d025113b2ea12bb6519286e57c14305071 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 14:28:06 +0100 Subject: [PATCH 22/33] add documentation --- packages/block-editor/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index ea9e184df26d9..23af7dd4743a8 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -349,7 +349,7 @@ Undocumented declaration. ### ELEMENT_BUTTON_CLASS_NAME -Undocumented declaration. +When this class name is given to an element it will be treated as a button element, and controlled by the settings in `{ "styles": { "elements": { "button": { }}}}`. ### FontSizePicker From c1fa1f97706aa0edabba68092ed4551c80378afe Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 14:28:40 +0100 Subject: [PATCH 23/33] remove unneeded code --- lib/compat/wordpress-6.1/blocks.php | 8 -------- 1 file changed, 8 deletions(-) diff --git a/lib/compat/wordpress-6.1/blocks.php b/lib/compat/wordpress-6.1/blocks.php index 9263fa0fa52d2..85e124306161a 100644 --- a/lib/compat/wordpress-6.1/blocks.php +++ b/lib/compat/wordpress-6.1/blocks.php @@ -158,11 +158,3 @@ function gutenberg_block_type_metadata_multiple_view_scripts( $metadata ) { return $metadata; } add_filter( 'block_type_metadata', 'gutenberg_block_type_metadata_multiple_view_scripts' ); - -add_filter( - 'block_editor_settings_all', - function( $settings ) { - $settings['elementButtonClassName'] = WP_THEME_JSON_GUTENBERG::ELEMENT_BUTTON_CLASS_NAME; - return $settings; - } -); From 6ca12edf854008c678ee6f69a9f0f697e5e7bda5 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 14:29:42 +0100 Subject: [PATCH 24/33] remove unneeded code --- .../editor/src/components/provider/use-block-editor-settings.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index bc209843d7dd4..0b52f841ece11 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -131,7 +131,6 @@ function useBlockEditorSettings( settings, hasTemplate ) { 'disableCustomColors', 'disableCustomFontSizes', 'disableCustomGradients', - 'elementButtonClassName', 'enableCustomLineHeight', 'enableCustomSpacing', 'enableCustomUnits', From cc917e4c17958329cdd5e7517339b8640357d8b8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 14:37:45 +0100 Subject: [PATCH 25/33] also make button a selector --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 6fa587ad2f54f..24bd3599f0ae8 100644 --- 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 @@ -25,7 +25,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { 'h4' => 'h4', 'h5' => 'h5', 'h6' => 'h6', - 'button' => '.wp-element-button, .wp-block-button', // We have the .wp-block-button class so that this will target older buttons that have been serialized. + '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. From 0587fc01ae6c7c9e28e3e366dff771cab9bca2d5 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 13 May 2022 14:39:29 +0100 Subject: [PATCH 26/33] remove unneeded changes --- packages/block-editor/README.md | 4 ---- packages/block-editor/src/index.js | 1 - 2 files changed, 5 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 23af7dd4743a8..57820884bb20d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -347,10 +347,6 @@ _Returns_ Undocumented declaration. -### ELEMENT_BUTTON_CLASS_NAME - -When this class name is given to an element it will be treated as a button element, and controlled by the settings in `{ "styles": { "elements": { "button": { }}}}`. - ### FontSizePicker _Related_ diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 594c78859b25c..078895c2c5a02 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -13,7 +13,6 @@ export { useCachedTruthy, } from './hooks'; export * from './components'; -export * from './elements'; export * from './utils'; export { storeConfig, store } from './store'; export { SETTINGS_DEFAULTS } from './store/defaults'; From 5dd8872c8d2ede6811d0dabded8606ad563a98ca Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 16 May 2022 13:56:45 +0100 Subject: [PATCH 27/33] Expose the classname const from block editor package --- packages/block-editor/README.md | 4 ++++ packages/block-editor/src/index.js | 1 + 2 files changed, 5 insertions(+) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 57820884bb20d..ea9e184df26d9 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -347,6 +347,10 @@ _Returns_ Undocumented declaration. +### ELEMENT_BUTTON_CLASS_NAME + +Undocumented declaration. + ### FontSizePicker _Related_ diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 078895c2c5a02..594c78859b25c 100644 --- 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'; From b3a24801dae8970b52b4bb1b6964eaa286a5fbe2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 18 May 2022 13:05:01 +0100 Subject: [PATCH 28/33] Update packages/block-library/src/button/deprecated.js Co-authored-by: Adam Zielinski --- packages/block-library/src/button/deprecated.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 6e857039dd0fd..78540d68c4570 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -187,7 +187,7 @@ const v11 = { }, reusable: false, spacing: { - __expeimentalSkipSerialization: true, + __experimentalSkipSerialization: true, padding: [ 'horizontal', 'vertical' ], __experimentalDefaultControls: { padding: true, From b7c560d8b07746b707ec837029c478bbaa6fa077 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 18 May 2022 13:13:14 +0100 Subject: [PATCH 29/33] update button element const --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +- packages/block-editor/README.md | 4 ---- packages/block-editor/src/elements/index.js | 2 +- packages/block-library/src/button/edit.js | 4 ++-- packages/block-library/src/button/save.js | 4 ++-- packages/block-library/src/search/edit.js | 4 ++-- packages/block-library/src/search/index.php | 2 +- 7 files changed, 9 insertions(+), 13 deletions(-) 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 index 24bd3599f0ae8..29940b03aa808 100644 --- 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 @@ -15,7 +15,7 @@ * @access private */ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { - const ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; + const __experimental_ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; const ELEMENTS = array( 'link' => 'a', diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index ea9e184df26d9..57820884bb20d 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -347,10 +347,6 @@ _Returns_ Undocumented declaration. -### ELEMENT_BUTTON_CLASS_NAME - -Undocumented declaration. - ### FontSizePicker _Related_ diff --git a/packages/block-editor/src/elements/index.js b/packages/block-editor/src/elements/index.js index 080ab2d48658d..b6847f0a8c2cb 100644 --- a/packages/block-editor/src/elements/index.js +++ b/packages/block-editor/src/elements/index.js @@ -1 +1 @@ -export const ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; +export const __experimentalElementButtonClassName = 'wp-element-button'; diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 7eb5c6de4bd18..286897068f174 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -25,7 +25,7 @@ import { __experimentalUseColorProps as useColorProps, __experimentalGetSpacingClassesAndStyles as useSpacingProps, __experimentalLinkControl as LinkControl, - ELEMENT_BUTTON_CLASS_NAME, + __experimentalElementButtonClassName, } from '@wordpress/block-editor'; import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; @@ -178,7 +178,7 @@ function ButtonEdit( props ) { // provided via block support. 'no-border-radius': style?.border?.radius === 0, }, - ELEMENT_BUTTON_CLASS_NAME + __experimentalElementButtonClassName ) } style={ { ...borderProps.style, diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index 57c430f815502..1dbe0108e3052 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -12,7 +12,7 @@ import { __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, - ELEMENT_BUTTON_CLASS_NAME, + __experimentalElementButtonClassName, } from '@wordpress/block-editor'; export default function save( { attributes, className } ) { @@ -43,7 +43,7 @@ export default function save( { attributes, className } ) { // block support. 'no-border-radius': style?.border?.radius === 0, }, - ELEMENT_BUTTON_CLASS_NAME + __experimentalElementButtonClassName ); const buttonStyle = { ...borderProps.style, diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index 1448fe038506c..90c7fbeb9501d 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -14,7 +14,7 @@ import { __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, store as blockEditorStore, - ELEMENT_BUTTON_CLASS_NAME, + __experimentalElementButtonClassName, } from '@wordpress/block-editor'; import { useDispatch, useSelect } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; @@ -243,7 +243,7 @@ export default function SearchEdit( { colorProps.className, isButtonPositionInside ? undefined : borderProps.className, buttonUseIcon ? 'has-icon' : undefined, - ELEMENT_BUTTON_CLASS_NAME + __experimentalElementButtonClassName ); const buttonStyles = { ...colorProps.style, diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 9f988b120b440..0bf1a88fd7748 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -102,7 +102,7 @@ function render_block_core_search( $attributes ) { } // Include the button element class. - $button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::ELEMENT_BUTTON_CLASS_NAME; + $button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__experimental_ELEMENT_BUTTON_CLASS_NAME; $button_markup = sprintf( '', From 317539202a7cb8bec742d7695f2a867180015692 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 18 May 2022 15:57:43 +0100 Subject: [PATCH 30/33] Make the const all uppercase --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +- packages/block-library/src/search/index.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index 29940b03aa808..6e7da01e13c4e 100644 --- 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 @@ -15,7 +15,7 @@ * @access private */ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { - const __experimental_ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; + const __EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME = 'wp-element-button'; const ELEMENTS = array( 'link' => 'a', diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php index 0bf1a88fd7748..49163b80a283b 100644 --- a/packages/block-library/src/search/index.php +++ b/packages/block-library/src/search/index.php @@ -102,7 +102,7 @@ function render_block_core_search( $attributes ) { } // Include the button element class. - $button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__experimental_ELEMENT_BUTTON_CLASS_NAME; + $button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME; $button_markup = sprintf( '', From d076dd456ccf2630e3565d486c195ac9e5570257 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 18 May 2022 16:16:36 +0100 Subject: [PATCH 31/33] fix spacing --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 6e7da01e13c4e..a30f99e788cfd 100644 --- 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 @@ -25,7 +25,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { '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. + '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. From efbcd29df08944ad9a0ed383aa5bfeef8737aad0 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 20 May 2022 21:31:37 +0100 Subject: [PATCH 32/33] update snapshots --- packages/block-library/src/buttons/test/edit.native.js | 2 +- .../editor/blocks/__snapshots__/buttons.test.js.snap | 8 ++++---- .../various/__snapshots__/inserting-blocks.test.js.snap | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/buttons/test/edit.native.js b/packages/block-library/src/buttons/test/edit.native.js index 10ab8c5df51b7..140169ead77ef 100644 --- 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 = `
-
Hello
+
Hello
`; const { getByA11yLabel } = await initializeEditor( { 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 index 20444c7b7e276..58feb9236d7dd 100644 --- 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,7 +3,7 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = ` "
-
WordPress
+
WordPress
" `; @@ -11,7 +11,7 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = ` exports[`Buttons dismisses link editor when escape is pressed 1`] = ` "
-
WordPress
+
WordPress
" `; @@ -19,7 +19,7 @@ exports[`Buttons dismisses link editor when escape is pressed 1`] = ` exports[`Buttons has focus on button content (slash inserter) 1`] = ` "
-
Content
+
Content
" `; @@ -27,7 +27,7 @@ exports[`Buttons has focus on button content (slash inserter) 1`] = ` exports[`Buttons has focus on button content 1`] = ` "
-
Content
+
Content
" `; 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 index d07caf7b01771..aa75e5d5ef89c 100644 --- 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`] = ` "
-
1.1
+
1.1
From 5bc74faca3458108d3dbd1af315ff38765a159e6 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 20 May 2022 21:40:35 +0100 Subject: [PATCH 33/33] add test --- .../src/buttons/test/__snapshots__/edit.native.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 77c8ca306d822..3321bcdf6740c 100644 --- 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`] = ` "
-
Hello
+
Hello
" `;