From ed06ca9e0e7d6d3b0cd14ebcc56fa662f223201d Mon Sep 17 00:00:00 2001 From: shimotmk Date: Mon, 16 Dec 2024 20:46:13 +0900 Subject: [PATCH 1/6] Fixes #64662 --- packages/block-library/src/button/block.json | 1 + .../block-library/src/button/deprecated.js | 185 ++++++++++++++++++ packages/block-library/src/button/edit.js | 17 ++ packages/block-library/src/button/save.js | 4 + .../blocks/core__button__deprecated-v12.html | 17 ++ .../blocks/core__button__deprecated-v12.json | 72 +++++++ .../core__button__deprecated-v12.parsed.json | 84 ++++++++ ...re__button__deprecated-v12.serialized.html | 17 ++ 8 files changed, 397 insertions(+) create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.html create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.json create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json create mode 100644 test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 2c1c05baa20dd..2d7b28938b22c 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -85,6 +85,7 @@ } }, "typography": { + "__experimentalSkipSerialization": true, "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index 8ab83e1b09518..eeb04c730abfb 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -14,6 +14,8 @@ import { __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, + __experimentalGetElementClassName, } from '@wordpress/block-editor'; import { compose } from '@wordpress/compose'; @@ -132,6 +134,188 @@ const blockAttributes = { }, }; +const v12 = { + attributes: { + tagName: { + type: 'string', + enum: [ 'a', 'button' ], + default: 'a', + }, + type: { + type: 'string', + default: 'button', + }, + textAlign: { + type: 'string', + }, + url: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'href', + }, + title: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'title', + }, + text: { + type: 'string', + source: 'html', + selector: 'a', + }, + linkTarget: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'target', + }, + rel: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'rel', + }, + placeholder: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + gradient: { + type: 'string', + }, + width: { + type: 'number', + }, + }, + supports: { + anchor: true, + align: true, + alignWide: false, + color: { + __experimentalSkipSerialization: true, + gradients: true, + __experimentalDefaultControls: { + background: true, + text: true, + }, + }, + typography: { + fontSize: true, + lineHeight: true, + __experimentalFontFamily: true, + __experimentalFontWeight: true, + __experimentalFontStyle: true, + __experimentalTextTransform: true, + __experimentalTextDecoration: true, + __experimentalLetterSpacing: true, + __experimentalWritingMode: true, + __experimentalDefaultControls: { + fontSize: true, + }, + }, + reusable: false, + shadow: { + __experimentalSkipSerialization: true, + }, + spacing: { + __experimentalSkipSerialization: true, + padding: [ 'horizontal', 'vertical' ], + __experimentalDefaultControls: { + padding: true, + }, + }, + __experimentalBorder: { + color: true, + radius: true, + style: true, + width: true, + __experimentalSkipSerialization: true, + __experimentalDefaultControls: { + color: true, + radius: true, + style: true, + width: true, + }, + }, + __experimentalSelector: '.wp-block-button__link', + interactivity: { + clientNavigation: true, + }, + }, + save( { attributes, className } ) { + const { + tagName, + type, + textAlign, + fontSize, + linkTarget, + rel, + style, + text, + title, + url, + width, + } = attributes; + + const TagName = tagName || 'a'; + const isButtonTag = 'button' === TagName; + const buttonType = type || 'button'; + const borderProps = getBorderClassesAndStyles( attributes ); + const colorProps = getColorClassesAndStyles( attributes ); + const spacingProps = getSpacingClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); + const buttonClasses = clsx( + 'wp-block-button__link', + colorProps.className, + borderProps.className, + { + [ `has-text-align-${ textAlign }` ]: textAlign, + // For backwards compatibility add style that isn't provided via + // block support. + 'no-border-radius': style?.border?.radius === 0, + }, + __experimentalGetElementClassName( 'button' ) + ); + const buttonStyle = { + ...borderProps.style, + ...colorProps.style, + ...spacingProps.style, + ...shadowProps.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 = clsx( className, { + [ `has-custom-width wp-block-button__width-${ width }` ]: width, + [ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize, + } ); + + return ( +
+ +
+ ); + }, +}; + const v11 = { attributes: { url: { @@ -399,6 +583,7 @@ const v10 = { }; const deprecated = [ + v12, v11, v10, { diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 520da26ef9671..78cf8969777ad 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -38,6 +38,8 @@ import { __experimentalGetElementClassName, store as blockEditorStore, useBlockEditingMode, + getTypographyClassesAndStyles as useTypographyProps, + useSettings, } from '@wordpress/block-editor'; import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; @@ -262,6 +264,19 @@ function ButtonEdit( props ) { [ context, isSelected, metadata?.bindings?.url ] ); + const [ fluidTypographySettings, layout ] = useSettings( + 'typography.fluid', + 'layout' + ); + const typographyProps = useTypographyProps( attributes, { + typography: { + fluid: fluidTypographySettings, + }, + layout: { + wideSize: layout?.wideSize, + }, + } ); + return ( <>
+
+ + + + + + + + + + + + +
+
+ diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.json new file mode 100644 index 0000000000000..b6cab91f0d522 --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.json @@ -0,0 +1,72 @@ +[ + { + "name": "core/buttons", + "isValid": true, + "attributes": { + "align": "wide", + "layout": { + "type": "flex", + "justifyContent": "center" + } + }, + "innerBlocks": [ + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 1", + "fontSize": "xx-large" + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 2", + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } + } + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 3", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": false, + "attributes": { + "tagName": "button", + "type": "button", + "text": "My button 4", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] + } + ] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json new file mode 100644 index 0000000000000..466b53ae00e0e --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json @@ -0,0 +1,84 @@ +[ + { + "blockName": "core/buttons", + "attrs": { + "align": "wide", + "layout": { + "type": "flex", + "justifyContent": "center" + } + }, + "innerBlocks": [ + { + "blockName": "core/button", + "attrs": { + "fontSize": "xx-large" + }, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": "core/button", + "attrs": { + "tagName": "button", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\n", + "innerContent": [ + "\n
\n" + ] + } + ], + "innerHTML": "\n
\n\n\n\n\n\n
\n", + "innerContent": [ + "\n
", + null, + "\n\n", + null, + "\n\n", + null, + "\n\n", + null, + "
\n" + ] + } +] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html new file mode 100644 index 0000000000000..2df6789245e5a --- /dev/null +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html @@ -0,0 +1,17 @@ + +
+ + + + + + + + + + + + +
+
+ From aaaa4522918e7ad198072c54a7092750c76f9327 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Tue, 17 Dec 2024 13:47:48 +0900 Subject: [PATCH 2/6] fix --- .../block-library/src/button/deprecated.js | 12 +- .../blocks/core__button__deprecated-v12.html | 6 +- .../blocks/core__button__deprecated-v12.json | 113 ++++++-------- .../core__button__deprecated-v12.parsed.json | 145 +++++++++--------- ...re__button__deprecated-v12.serialized.html | 8 +- 5 files changed, 134 insertions(+), 150 deletions(-) diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js index eeb04c730abfb..f478c39a0dc32 100644 --- a/packages/block-library/src/button/deprecated.js +++ b/packages/block-library/src/button/deprecated.js @@ -157,25 +157,29 @@ const v12 = { title: { type: 'string', source: 'attribute', - selector: 'a', + selector: 'a,button', attribute: 'title', + role: 'content', }, text: { - type: 'string', - source: 'html', - selector: 'a', + type: 'rich-text', + source: 'rich-text', + selector: 'a,button', + role: 'content', }, linkTarget: { type: 'string', source: 'attribute', selector: 'a', attribute: 'target', + role: 'content', }, rel: { type: 'string', source: 'attribute', selector: 'a', attribute: 'rel', + role: 'content', }, placeholder: { type: 'string', diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.html index 03ac733e5c317..b62b6f0020569 100644 --- a/test/integration/fixtures/blocks/core__button__deprecated-v12.html +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.html @@ -1,5 +1,4 @@ - -
+ @@ -13,5 +12,4 @@
-
- + diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.json index b6cab91f0d522..2c204623dc252 100644 --- a/test/integration/fixtures/blocks/core__button__deprecated-v12.json +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.json @@ -1,72 +1,59 @@ [ { - "name": "core/buttons", + "name": "core/button", "isValid": true, "attributes": { - "align": "wide", - "layout": { - "type": "flex", - "justifyContent": "center" + "tagName": "a", + "type": "button", + "text": "My button 1", + "fontSize": "xx-large" + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 2", + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } } }, - "innerBlocks": [ - { - "name": "core/button", - "isValid": true, - "attributes": { - "tagName": "a", - "type": "button", - "text": "My button 1", - "fontSize": "xx-large" - }, - "innerBlocks": [] - }, - { - "name": "core/button", - "isValid": true, - "attributes": { - "tagName": "a", - "type": "button", - "text": "My button 2", - "style": { - "typography": { - "fontStyle": "normal", - "fontWeight": "800" - } - } - }, - "innerBlocks": [] - }, - { - "name": "core/button", - "isValid": true, - "attributes": { - "tagName": "a", - "type": "button", - "text": "My button 3", - "style": { - "typography": { - "letterSpacing": "39px" - } - } - }, - "innerBlocks": [] - }, - { - "name": "core/button", - "isValid": false, - "attributes": { - "tagName": "button", - "type": "button", - "text": "My button 4", - "style": { - "typography": { - "letterSpacing": "39px" - } - } - }, - "innerBlocks": [] + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "a", + "type": "button", + "text": "My button 3", + "style": { + "typography": { + "letterSpacing": "39px" + } } - ] + }, + "innerBlocks": [] + }, + { + "name": "core/button", + "isValid": true, + "attributes": { + "tagName": "button", + "type": "button", + "text": "My button 4", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [] } ] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json index 466b53ae00e0e..d631bc600e49a 100644 --- a/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json @@ -1,84 +1,81 @@ [ { - "blockName": "core/buttons", + "blockName": "core/button", "attrs": { - "align": "wide", - "layout": { - "type": "flex", - "justifyContent": "center" + "fontSize": "xx-large" + }, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "fontStyle": "normal", + "fontWeight": "800" + } } }, - "innerBlocks": [ - { - "blockName": "core/button", - "attrs": { - "fontSize": "xx-large" - }, - "innerBlocks": [], - "innerHTML": "\n\n", - "innerContent": [ - "\n\n" - ] - }, - { - "blockName": "core/button", - "attrs": { - "style": { - "typography": { - "fontStyle": "normal", - "fontWeight": "800" - } - } - }, - "innerBlocks": [], - "innerHTML": "\n\n", - "innerContent": [ - "\n\n" - ] - }, - { - "blockName": "core/button", - "attrs": { - "style": { - "typography": { - "letterSpacing": "39px" - } - } - }, - "innerBlocks": [], - "innerHTML": "\n\n", - "innerContent": [ - "\n\n" - ] - }, - { - "blockName": "core/button", - "attrs": { - "tagName": "button", - "style": { - "typography": { - "letterSpacing": "39px" - } - } - }, - "innerBlocks": [], - "innerHTML": "\n
\n", - "innerContent": [ - "\n
\n" - ] + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "style": { + "typography": { + "letterSpacing": "39px" + } } - ], - "innerHTML": "\n
\n\n\n\n\n\n
\n", + }, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ + "\n\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\n", + "innerContent": [ "\n\n" ] + }, + { + "blockName": "core/button", + "attrs": { + "tagName": "button", + "style": { + "typography": { + "letterSpacing": "39px" + } + } + }, + "innerBlocks": [], + "innerHTML": "\n
\n", "innerContent": [ - "\n
", - null, - "\n\n", - null, - "\n\n", - null, - "\n\n", - null, - "
\n" + "\n
\n" ] } ] diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html index 2df6789245e5a..8de91591d7439 100644 --- a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html @@ -1,5 +1,4 @@ - -
+ @@ -12,6 +11,5 @@ -
-
- +
+ From c5b5dee3b0b6afec236bbb2526523bfbb6078645 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Tue, 17 Dec 2024 18:22:49 +0900 Subject: [PATCH 3/6] fix writing-mode https://github.com/WordPress/gutenberg/pull/68023#discussion_r1887732639 --- packages/block-library/src/button/block.json | 11 ++++++++++- packages/block-library/src/button/edit.js | 1 + packages/block-library/src/button/save.js | 1 + 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 2d7b28938b22c..85ed4c3982cd0 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -85,7 +85,16 @@ } }, "typography": { - "__experimentalSkipSerialization": true, + "__experimentalSkipSerialization": [ + "fontSize", + "lineHeight", + "__experimentalFontFamily", + "__experimentalFontWeight", + "__experimentalFontStyle", + "__experimentalTextTransform", + "__experimentalTextDecoration", + "__experimentalLetterSpacing" + ], "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 78cf8969777ad..e43e71379dd2e 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -318,6 +318,7 @@ function ButtonEdit( props ) { ...spacingProps.style, ...shadowProps.style, ...typographyProps.style, + writingMode: undefined, } } onReplace={ onReplace } onMerge={ mergeBlocks } diff --git a/packages/block-library/src/button/save.js b/packages/block-library/src/button/save.js index 255e3a31dde38..9069f25182a01 100644 --- a/packages/block-library/src/button/save.js +++ b/packages/block-library/src/button/save.js @@ -59,6 +59,7 @@ export default function save( { attributes, className } ) { ...spacingProps.style, ...shadowProps.style, ...typographyProps.style, + writingMode: undefined, }; // The use of a `title` attribute here is soft-deprecated, but still applied From e0fbfd4f2173ac22c29f2172fa5cdc88a0e04310 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Wed, 18 Dec 2024 19:45:01 +0900 Subject: [PATCH 4/6] fix https://github.com/WordPress/gutenberg/pull/68023#discussion_r1889224581 --- packages/block-library/src/button/block.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json index 85ed4c3982cd0..953fcae0237db 100644 --- a/packages/block-library/src/button/block.json +++ b/packages/block-library/src/button/block.json @@ -88,12 +88,12 @@ "__experimentalSkipSerialization": [ "fontSize", "lineHeight", - "__experimentalFontFamily", - "__experimentalFontWeight", - "__experimentalFontStyle", - "__experimentalTextTransform", - "__experimentalTextDecoration", - "__experimentalLetterSpacing" + "fontFamily", + "fontWeight", + "fontStyle", + "textTransform", + "textDecoration", + "letterSpacing" ], "fontSize": true, "lineHeight": true, From 0f0013d0ac973d7a799a2c4f77638a9d77252cb9 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Fri, 20 Dec 2024 19:30:17 +0900 Subject: [PATCH 5/6] fix https://github.com/WordPress/gutenberg/pull/68023#pullrequestreview-2507670219 --- packages/block-library/src/button/edit.js | 3 ++- packages/block-library/src/button/save.js | 2 +- .../blocks/core__button__deprecated-v10.serialized.html | 2 +- .../blocks/core__button__deprecated-v12.serialized.html | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index e43e71379dd2e..5185bfea7dcd6 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -284,7 +284,6 @@ function ButtonEdit( props ) { className={ clsx( blockProps.className, { [ `has-custom-width wp-block-button__width-${ width }` ]: width, - [ `has-custom-font-size` ]: blockProps.style.fontSize, } ) } > - + diff --git a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html index 8de91591d7439..8de25b59343b3 100644 --- a/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html +++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html @@ -1,5 +1,5 @@ - + From 7f352e352721a7f024105d920f3b05b888c47598 Mon Sep 17 00:00:00 2001 From: shimotmk Date: Mon, 23 Dec 2024 06:57:37 +0900 Subject: [PATCH 6/6] try https://github.com/WordPress/gutenberg/pull/68023#issuecomment-2558602641 --- packages/block-editor/src/hooks/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index c7f9df868f2bd..0e4c2aa276fd4 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -33,3 +33,4 @@ export { getColorClassesAndStyles, useColorProps } from './use-color-props'; export { getSpacingClassesAndStyles } from './use-spacing-props'; export { useCachedTruthy } from './use-cached-truthy'; export { useEditorWrapperStyles } from './use-editor-wrapper-styles'; +export { getTypographyClassesAndStyles } from './use-typography-props';