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`] = `
"
-