From a155ff47bd9dece24893b5df14ddf81431d4cbd8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 28 Apr 2021 15:39:00 +1000 Subject: [PATCH 1/3] Add utilities to get border support classes and styles This follows the same pattern as the utilities added for the colors block support. Its intended use is in retrieving border related styles and classes to apply to inner block elements. --- packages/block-editor/src/hooks/index.js | 1 + .../src/hooks/use-border-props.js | 73 +++++++++++++++++++ packages/block-editor/src/index.js | 2 + 3 files changed, 76 insertions(+) create mode 100644 packages/block-editor/src/hooks/use-border-props.js diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index ea343c8d37773f..e72a00e59d22fe 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -12,4 +12,5 @@ import './font-size'; import './border-color'; import './layout'; +export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; diff --git a/packages/block-editor/src/hooks/use-border-props.js b/packages/block-editor/src/hooks/use-border-props.js new file mode 100644 index 00000000000000..1e8a853057eeb9 --- /dev/null +++ b/packages/block-editor/src/hooks/use-border-props.js @@ -0,0 +1,73 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Internal dependencies + */ +import { getInlineStyles } from './style'; +import { + getColorClassName, + getColorObjectByAttributeValues, +} from '../components/colors'; +import useEditorFeature from '../components/use-editor-feature'; + +// This utility is intended to assist where the serialization of the border +// block support is being skipped for a block but the border related CSS classes +// & styles still need to be generated so they can be applied to inner elements. + +const EMPTY_ARRAY = []; + +/** + * Provides the CSS class names and inline styles for a block's border support + * attributes. + * + * @param {Object} attributes Block attributes. + * @param {string} attributes.borderColor Selected named border color. + * @param {Object} attributes.style Block's styles attribute. + * + * @return {Object} Border block support derived CSS classes & styles. + */ +export function getBorderClassesAndStyles( { borderColor, style } ) { + const borderStyles = style?.border || {}; + const borderClass = getColorClassName( 'border-color', borderColor ); + + const className = classnames( { + [ borderClass ]: !! borderClass, + 'has-border-color': borderColor || style?.border?.color, + } ); + + return { + className: className || undefined, + style: getInlineStyles( { border: borderStyles } ), + }; +} + +/** + * Derives the border related props for a block from its border block support + * attributes. + * + * Inline styles are forced for named colors to ensure these selections are + * reflected when themes do not load their color stylesheets in the editor. + * + * @param {Object} attributes Block attributes. + * @return {Object} ClassName & style props from border block support. + */ +export function useBorderProps( attributes ) { + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const borderProps = getBorderClassesAndStyles( attributes ); + + // Force inline style to apply border color when themes do not load their + // color stylesheets in the editor. + if ( attributes.borderColor ) { + const borderColorObject = getColorObjectByAttributeValues( + colors, + attributes.borderColor + ); + + borderProps.style.borderColor = borderColorObject.color; + } + + return borderProps; +} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index a5604c367c0252..deca54bba61220 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -8,6 +8,8 @@ import '@wordpress/rich-text'; */ import './hooks'; export { + getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles, + useBorderProps as __experimentalUseBorderProps, getColorClassesAndStyles as __experimentalGetColorClassesAndStyles, useColorProps as __experimentalUseColorProps, } from './hooks'; From 3696450b9a09a192749fda734df56bf27a720399 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 28 Apr 2021 15:56:45 +1000 Subject: [PATCH 2/3] Export border support utilities for native --- 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 617bd51a05726e..11dbe0a30e4c9a 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -9,4 +9,5 @@ import './style'; import './color'; import './font-size'; +export { getBorderClassesAndStyles, useBorderProps } from './use-border-props'; export { getColorClassesAndStyles, useColorProps } from './use-color-props'; From 47fc6292ee9930616b1a89ee402b7796eeed7813 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 28 Apr 2021 15:42:08 +1000 Subject: [PATCH 3/3] Add border support to table block This extends the table block to opt into border color, style and width block support features. It skips serialization of this support so it can be applied to the inner `table` element. --- packages/block-library/src/table/block.json | 6 ++++ packages/block-library/src/table/edit.js | 12 +++++--- packages/block-library/src/table/save.js | 6 ++-- packages/block-library/src/table/style.scss | 32 +++++++++++++++++++++ 4 files changed, 50 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json index 60d8164a5e463b..32e380693b4094 100644 --- a/packages/block-library/src/table/block.json +++ b/packages/block-library/src/table/block.json @@ -126,6 +126,12 @@ "__experimentalSkipSerialization": true, "gradients": true }, + "__experimentalBorder": { + "__experimentalSkipSerialization": true, + "color": true, + "style": true, + "width": true + }, "__experimentalSelector": ".wp-block-table > table" }, "editorStyle": "wp-block-table-editor", diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index 310c8b189877c4..22e756bdd450b7 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -15,6 +15,7 @@ import { AlignmentToolbar, useBlockProps, __experimentalUseColorProps as useColorProps, + __experimentalUseBorderProps as useBorderProps, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { @@ -103,6 +104,7 @@ function TableEdit( { const [ selectedCell, setSelectedCell ] = useState(); const colorProps = useColorProps( attributes ); + const borderProps = useBorderProps( attributes ); /** * Updates the initial column count used for table creation. @@ -477,10 +479,12 @@ function TableEdit( { ) } { ! isEmpty && ( { renderedSections }
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js index dbc2e389bf8757..a2aaef4f81a789 100644 --- a/packages/block-library/src/table/save.js +++ b/packages/block-library/src/table/save.js @@ -9,6 +9,7 @@ import classnames from 'classnames'; import { RichText, useBlockProps, + __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, } from '@wordpress/block-editor'; @@ -21,8 +22,9 @@ export default function save( { attributes } ) { } const colorProps = getColorClassesAndStyles( attributes ); + const borderProps = getBorderClassesAndStyles( attributes ); - const classes = classnames( colorProps.className, { + const classes = classnames( colorProps.className, borderProps.className, { 'has-fixed-layout': hasFixedLayout, } ); @@ -73,7 +75,7 @@ export default function save( { attributes } ) {
diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss index 0a18b92b5b8d4e..f5c61cdc369382 100644 --- a/packages/block-library/src/table/style.scss +++ b/packages/block-library/src/table/style.scss @@ -97,4 +97,36 @@ border-bottom: 1px solid $gray-100; } + + // Border Styles + // + // Allow any custom border color, style or width selections to be inherited + // from the table element that receives the border support props. + + .has-border-color { + > *, + tr, + th, + td { + border-color: inherit; + } + } + + table[style*="border-style"] { + > *, + tr, + th, + td { + border-style: inherit; + } + } + + table[style*="border-width"] { + > *, + tr, + th, + td { + border-width: inherit; + } + } }