diff --git a/docs/reference-guides/core-blocks/README.md b/docs/reference-guides/core-blocks/README.md index 04a240d8841f99..3faeb617e0fd53 100644 --- a/docs/reference-guides/core-blocks/README.md +++ b/docs/reference-guides/core-blocks/README.md @@ -990,7 +990,7 @@ Create structured content in rows and columns to display information. - **Name:** [core/table](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/core-block-table/) - **Category:** [text](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-text/) -- **Supports:** align, anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight) +- **Supports:** align, anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight, textAlign) - **Attributes:** body, caption, foot, hasFixedLayout, head ## Table of Contents diff --git a/packages/block-library/src/table/README.md b/packages/block-library/src/table/README.md index f235019f98f2b8..27987be62d3f1a 100644 --- a/packages/block-library/src/table/README.md +++ b/packages/block-library/src/table/README.md @@ -34,6 +34,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography): - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true` - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true` + - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true` - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): - `clientNavigation`: `true` diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json index 84f2783d3ff8c0..1ae82fc6ba95f2 100644 --- a/packages/block-library/src/table/block.json +++ b/packages/block-library/src/table/block.json @@ -176,6 +176,7 @@ } }, "typography": { + "__experimentalSkipSerialization": [ "textAlign" ], "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, @@ -184,6 +185,7 @@ "__experimentalLetterSpacing": true, "__experimentalTextTransform": true, "__experimentalTextDecoration": true, + "textAlign": true, "__experimentalDefaultControls": { "fontSize": true } diff --git a/packages/block-library/src/table/edit.jsx b/packages/block-library/src/table/edit.jsx index 0de31407f8f3d7..d125e698349936 100644 --- a/packages/block-library/src/table/edit.jsx +++ b/packages/block-library/src/table/edit.jsx @@ -102,6 +102,7 @@ function TableEdit( { const colorProps = useColorProps( attributes ); const borderProps = useBorderProps( attributes ); + const textAlign = attributes?.style?.typography?.textAlign; const blockEditingMode = useBlockEditingMode(); const tableRef = useRef(); @@ -528,6 +529,7 @@ function TableEdit( { borderProps.className, { 'has-fixed-layout': hasFixedLayout, + [ `has-text-align-${ textAlign }` ]: textAlign, // This is required in the editor only to overcome // the fact the editor rewrites individual border // widths into a shorthand format. diff --git a/packages/block-library/src/table/save.jsx b/packages/block-library/src/table/save.jsx index 098e907e0951f8..5472d458fd0db4 100644 --- a/packages/block-library/src/table/save.jsx +++ b/packages/block-library/src/table/save.jsx @@ -8,7 +8,7 @@ import { } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { hasFixedLayout, head, body, foot, caption } = attributes; + const { hasFixedLayout, head, body, foot, caption, style } = attributes; const isEmpty = ! head.length && ! body.length && ! foot.length; if ( isEmpty ) { @@ -18,8 +18,11 @@ export default function save( { attributes } ) { const colorProps = getColorClassesAndStyles( attributes ); const borderProps = getBorderClassesAndStyles( attributes ); + const textAlign = style?.typography?.textAlign; + const classes = clsx( colorProps.className, borderProps.className, { 'has-fixed-layout': hasFixedLayout, + [ `has-text-align-${ textAlign }` ]: textAlign, } ); const hasCaption = ! RichText.isEmpty( caption );