From afabcebf6675ad7a5ab4b39dc60abb7ed5b880ab Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Fri, 9 Apr 2021 18:10:51 +0200 Subject: [PATCH] Button Block: Use hook based border support --- packages/block-editor/CHANGELOG.md | 6 +- packages/block-editor/src/hooks/index.js | 2 + packages/block-editor/src/index.js | 1 + packages/block-library/src/button/block.json | 10 +- .../block-library/src/button/deprecated.js | 131 +++++++++++++++++- packages/block-library/src/button/edit.js | 44 +----- packages/block-library/src/button/save.js | 18 +-- ...re__button__border_radius__deprecated.html | 3 + ...re__button__border_radius__deprecated.json | 27 ++++ ...ton__border_radius__deprecated.parsed.json | 22 +++ ..._border_radius__deprecated.serialized.html | 5 + .../blocks/core__button__squared.html | 4 +- .../blocks/core__button__squared.json | 6 +- .../blocks/core__button__squared.parsed.json | 8 +- .../core__button__squared.serialized.html | 4 +- .../adding-patterns.test.js.snap | 6 +- 16 files changed, 224 insertions(+), 73 deletions(-) create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index e0ce647afb14bb..0ceb22551297b1 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,9 +2,13 @@ ## Unreleased +### New Feature + +- Export `__experimentalGetInlineStyles` to enable blocks to flatten nested style attributes into CSS properties ([#26655](https://github.com/WordPress/gutenberg/pull/30194)). + ## 5.3.0 (2021-03-17) -- Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere. +- Add `JustifyToolbar` component abstracted out of the Navigation block so can be used elsewhere. ## 5.2.0 (2020-12-17) diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index c087e994ba9eb9..6ad75479d78a5f 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -9,3 +9,5 @@ import './style'; import './color'; import './font-size'; import './layout'; + +export { getInlineStyles } from './style'; diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index e8a1ebcd480c2b..bbc46f5352051d 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -7,6 +7,7 @@ import '@wordpress/rich-text'; * Internal dependencies */ import './hooks'; +export { getInlineStyles as __experimentalGetInlineStyles } from './hooks'; export * from './components'; export * from './utils'; export { storeConfig, store } from './store'; diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 01097b424462fa..51253742e5f483 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -38,12 +38,6 @@ "placeholder": { "type": "string" }, - "borderRadius": { - "type": "number" - }, - "style": { - "type": "object" - }, "backgroundColor": { "type": "string" }, @@ -67,6 +61,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 95b8f9fe7eb923..630cd888345154 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 714554e2ffdc96..26c197464ce967 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, @@ -24,6 +23,7 @@ import { InspectorAdvancedControls, RichText, useBlockProps, + __experimentalGetInlineStyles as getInlineStyles, __experimentalLinkControl as LinkControl, __experimentalUseEditorFeature as useEditorFeature, } from '@wordpress/block-editor'; @@ -37,39 +37,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 +161,10 @@ function ButtonEdit( props ) { mergeBlocks, } = props; const { - borderRadius, linkTarget, placeholder, rel, + style, text, url, width, @@ -255,13 +225,11 @@ function ButtonEdit( props ) { 'wp-block-button__link', colorProps.className, { - 'no-border-radius': borderRadius === 0, + 'no-border-radius': style?.border?.radius === 0, } ) } style={ { - borderRadius: borderRadius - ? borderRadius + 'px' - : undefined, + ...getInlineStyles( style ), ...colorProps.style, } } onSplit={ ( value ) => @@ -284,10 +252,6 @@ function ButtonEdit( props ) { anchorRef={ ref } /> - +
My button
+ \ 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 00000000000000..07131acba84df0 --- /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": "
My button
" + }, + { + "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 00000000000000..52250380f0b291 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.parsed.json @@ -0,0 +1,22 @@ +[ + { + "blockName": "core/button", + "attrs": { + "borderRadius": 25 + }, + "innerBlocks": [], + "innerHTML": "\n
My button
\n", + "innerContent": [ + "\n
My button
\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 00000000000000..4cc048a9c2e7eb --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__button__border_radius__deprecated.serialized.html @@ -0,0 +1,5 @@ + +
My button
+ + + diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.html b/packages/e2e-tests/fixtures/blocks/core__button__squared.html index 14aa9b56305fa7..e5bb0ee927f56c 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 @@ - -
My button
+ +
My button
diff --git a/packages/e2e-tests/fixtures/blocks/core__button__squared.json b/packages/e2e-tests/fixtures/blocks/core__button__squared.json index f0503379bdd01a..5565073dee65ef 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" @@ -14,6 +16,6 @@ } }, "innerBlocks": [], - "originalContent": "
My button
" + "originalContent": "
My button
" } ] 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 746e883257e7eb..67e504c3c915a8 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" @@ -11,9 +13,9 @@ } }, "innerBlocks": [], - "innerHTML": "\n
My button
\n", + "innerHTML": "\n
My button
\n", "innerContent": [ - "\n
My button
\n" + "\n
My button
\n" ] }, { 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 aea05e9fe5eba2..84da206f1a3169 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 @@ - -
My button
+ +
My button
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 d3894f3030d376..b8886334c07b0d 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`] = ` " -
-
Download now
+
+
Download now
- +
About Cervantes
"