diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index da910ca84747a..5eebd221e8a2c 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -173,6 +173,11 @@ "border": { "customRadius": false } + }, + "core/button": { + "border": { + "customRadius": true + } } } } diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 08887e163c4b5..a9b483981eccf 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -36,12 +36,6 @@ "placeholder": { "type": "string" }, - "borderRadius": { - "type": "number" - }, - "style": { - "type": "object" - }, "backgroundColor": { "type": "string" }, @@ -65,6 +59,10 @@ }, "fontSize": true, "reusable": false, + "__experimentalBorder": { + "radius": true, + "__experimentalSkipSerialization": true + }, "__experimentalFontFamily": true, "__experimentalSelector": ".wp-block-button__link" }, diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 95b8f9fe7eb92..630cd88834515 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -13,12 +13,29 @@ import { useBlockProps, __experimentalGetGradientClass, } from '@wordpress/block-editor'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies */ import getColorAndStyleProps from './color-props'; +const migrateBorderRadius = ( attributes ) => { + const { borderRadius, ...newAttributes } = attributes; + + if ( ! borderRadius && borderRadius !== 0 ) { + return newAttributes; + } + + return { + ...newAttributes, + style: { + ...newAttributes.style, + border: { radius: borderRadius }, + }, + }; +}; + const migrateCustomColorsAndGradients = ( attributes ) => { if ( ! attributes.customTextColor && @@ -180,6 +197,102 @@ const deprecated = [ ); }, + migrate: migrateBorderRadius, + }, + { + supports: { + anchor: true, + align: true, + alignWide: false, + color: { + __experimentalSkipSerialization: true, + }, + reusable: false, + __experimentalSelector: '.wp-block-button__link', + }, + attributes: { + ...blockAttributes, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'target', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'rel', + }, + placeholder: { + type: 'string', + }, + borderRadius: { + type: 'number', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + gradient: { + type: 'string', + }, + style: { + type: 'object', + }, + width: { + type: 'number', + }, + }, + save( { attributes, className } ) { + const { + borderRadius, + linkTarget, + rel, + text, + title, + url, + width, + } = attributes; + const colorProps = getColorAndStyleProps( attributes ); + const buttonClasses = classnames( + 'wp-block-button__link', + colorProps.className, + { + 'no-border-radius': borderRadius === 0, + } + ); + const buttonStyle = { + borderRadius: borderRadius ? borderRadius + 'px' : undefined, + ...colorProps.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, + } ); + + return ( +
+ +
+ ); + }, + migrate: migrateBorderRadius, }, { supports: { @@ -249,6 +362,7 @@ const deprecated = [ /> ); }, + migrate: migrateBorderRadius, }, { supports: { @@ -299,7 +413,10 @@ const deprecated = [ !! attributes.customTextColor || !! attributes.customBackgroundColor || !! attributes.customGradient, - migrate: migrateCustomColorsAndGradients, + migrate: compose( + migrateBorderRadius, + migrateCustomColorsAndGradients + ), save( { attributes } ) { const { backgroundColor, @@ -413,11 +530,13 @@ const deprecated = [ .replace( /is-style-squared[\s]?/, '' ) .trim(); } - return migrateCustomColorsAndGradients( { - ...attributes, - className: newClassName ? newClassName : undefined, - borderRadius: 0, - } ); + return migrateBorderRadius( + migrateCustomColorsAndGradients( { + ...attributes, + className: newClassName ? newClassName : undefined, + borderRadius: 0, + } ) + ); }, save( { attributes } ) { const { diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 714554e2ffdc9..328bf9af5da36 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -13,7 +13,6 @@ import { ButtonGroup, KeyboardShortcuts, PanelBody, - RangeControl, TextControl, ToolbarButton, Popover, @@ -37,39 +36,9 @@ import { createBlock } from '@wordpress/blocks'; import getColorAndStyleProps from './color-props'; const NEW_TAB_REL = 'noreferrer noopener'; -const MIN_BORDER_RADIUS_VALUE = 0; -const MAX_BORDER_RADIUS_VALUE = 50; -const INITIAL_BORDER_RADIUS_POSITION = 5; const EMPTY_ARRAY = []; -function BorderPanel( { borderRadius = '', setAttributes } ) { - const initialBorderRadius = borderRadius; - const setBorderRadius = useCallback( - ( newBorderRadius ) => { - if ( newBorderRadius === undefined ) - setAttributes( { - borderRadius: initialBorderRadius, - } ); - else setAttributes( { borderRadius: newBorderRadius } ); - }, - [ setAttributes ] - ); - return ( - - - - ); -} - function WidthPanel( { selectedWidth, setAttributes } ) { function handleChange( newWidth ) { // Check if we are toggling the width off @@ -191,10 +160,10 @@ function ButtonEdit( props ) { mergeBlocks, } = props; const { - borderRadius, linkTarget, placeholder, rel, + style, text, url, width, @@ -231,6 +200,7 @@ function ButtonEdit( props ) { setAttributes( { text: newText.replace( /<\/?a[^>]*>/g, '' ) } ); }; + const borderRadius = style?.border?.radius; const colorProps = getColorAndStyleProps( attributes, colors, true ); const ref = useRef(); const blockProps = useBlockProps( { ref } ); @@ -284,10 +254,6 @@ function ButtonEdit( props ) { anchorRef={ ref } /> - + + \ No newline at end of file diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json new file mode 100644 index 0000000000000..00f2d0ab54074 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json @@ -0,0 +1,27 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/button", + "isValid": true, + "attributes": { + "text": "My button", + "style": { + "border": { + "radius": 25 + } + } + }, + "innerBlocks": [], + "originalContent": "" + }, + { + "clientId": "_clientId_1", + "name": "core/freeform", + "isValid": true, + "attributes": { + "content": "" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json new file mode 100644 index 0000000000000..952ca954b416c --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json @@ -0,0 +1,20 @@ +[ + { + "blockName": "core/button", + "attrs": { + "borderRadius": 25 + }, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [ "" ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html new file mode 100644 index 0000000000000..4cc048a9c2e7e --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.html index 14aa9b56305fa..fa615a348d0ff 100644 --- a/packages/e2e-tests/fixtures/blocks/core__button__squared.html +++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.html @@ -1,3 +1,3 @@ - + diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.json index b6aa4a27b47d4..67d2b63e6c551 100644 --- a/packages/e2e-tests/fixtures/blocks/core__button__squared.json +++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.json @@ -5,8 +5,10 @@ "isValid": true, "attributes": { "text": "My button", - "borderRadius": 0, "style": { + "border": { + "radius": 0 + }, "color": { "text": "#1b9b6c", "background": "#aa5a20" diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json index 9882ddb6dca5d..6a5b451fe8ad2 100644 --- a/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json +++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.parsed.json @@ -2,8 +2,10 @@ { "blockName": "core/button", "attrs": { - "borderRadius": 0, "style": { + "border": { + "radius": 0 + }, "color": { "text": "#1b9b6c", "background": "#aa5a20" diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html index aea05e9fe5eba..29e7fed15a510 100644 --- a/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html +++ b/packages/e2e-tests/fixtures/blocks/core__button__squared.serialized.html @@ -1,3 +1,3 @@ - + diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap index d3894f3030d37..85eaf50e88cea 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap @@ -2,11 +2,11 @@ exports[`adding patterns should insert a block pattern 1`] = ` " -