diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
index c7f9df868f2bd7..0e4c2aa276fd40 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';
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index 2c1c05baa20dd3..6fcb7aca4c5923 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -85,6 +85,16 @@
}
},
"typography": {
+ "__experimentalSkipSerialization": [
+ "fontSize",
+ "lineHeight",
+ "fontFamily",
+ "fontWeight",
+ "fontStyle",
+ "textTransform",
+ "textDecoration",
+ "letterSpacing"
+ ],
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
@@ -122,7 +132,6 @@
"width": true
}
},
- "__experimentalSelector": ".wp-block-button .wp-block-button__link",
"interactivity": {
"clientNavigation": true
}
@@ -132,5 +141,11 @@
{ "name": "outline", "label": "Outline" }
],
"editorStyle": "wp-block-button-editor",
- "style": "wp-block-button"
+ "style": "wp-block-button",
+ "selectors": {
+ "root": ".wp-block-button .wp-block-button__link",
+ "typography": {
+ "writingMode": ".wp-block-button"
+ }
+ }
}
diff --git a/packages/block-library/src/button/deprecated.js b/packages/block-library/src/button/deprecated.js
index 8ab83e1b09518f..f478c39a0dc326 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,192 @@ 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,button',
+ attribute: 'title',
+ role: 'content',
+ },
+ text: {
+ 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',
+ },
+ 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 +587,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 609aa955851076..593066d6555b40 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -39,6 +39,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';
@@ -266,6 +268,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.html b/test/integration/fixtures/blocks/core__button__deprecated-v12.html
new file mode 100644
index 00000000000000..b62b6f0020569f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 00000000000000..2c204623dc252f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.json
@@ -0,0 +1,59 @@
+[
+ {
+ "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": 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
new file mode 100644
index 00000000000000..d631bc600e49ac
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.parsed.json
@@ -0,0 +1,81 @@
+[
+ {
+ "blockName": "core/button",
+ "attrs": {
+ "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": [],
+ "innerHTML": "\n\n",
+ "innerContent": [
+ "\n\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\n",
+ "innerContent": [ "\n\n" ]
+ },
+ {
+ "blockName": "core/button",
+ "attrs": {
+ "style": {
+ "typography": {
+ "letterSpacing": "39px"
+ }
+ }
+ },
+ "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\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 00000000000000..8de25b59343b3f
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__button__deprecated-v12.serialized.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+