Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Table: Add colors block support #30791

Merged
merged 2 commits into from
Apr 27, 2021
Merged

Table: Add colors block support #30791

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a52c4f2
Add color block support to table block
aaronrobertshaw Apr 12, 2021
86f6423
Update fixtures to match table block deprecations
aaronrobertshaw Apr 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/block-library/src/table/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@
"type": "boolean",
"default": false
},
"backgroundColor": {
"type": "string"
},
"caption": {
"type": "string",
"source": "html",
Expand Down Expand Up @@ -125,6 +122,10 @@
"supports": {
"anchor": true,
"align": true,
"color": {
oandregal marked this conversation as resolved.
Show resolved Hide resolved
"__experimentalSkipSerialization": true,
"gradients": true
},
"__experimentalSelector": ".wp-block-table > table"
},
"editorStyle": "wp-block-table-editor",
Expand Down
250 changes: 249 additions & 1 deletion packages/block-library/src/table/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,261 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { RichText, getColorClassName } from '@wordpress/block-editor';
import {
RichText,
getColorClassName,
useBlockProps,
} from '@wordpress/block-editor';

const supports = {
align: true,
};

// As the previous arbitrary colors won't match theme color palettes, the hex
// value will be mapped to the style.color.background attribute as if it was
// a custom color selection.
const oldColors = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are making every table block that exists use inline styles instead of a color class. But we will still need to keep the old classes so the blocks properly work on the frontend even if they are never opened on the editor.

Could we leave the attributes as they were instead (keeping the classes and named attributes)? I guess we could keep the old colors as the default table block palette on lib/experimental-default-theme.json. Given that the classes still exist and will always be preset I guess the blocks should still look ok without any migration.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are making every table block that exists use inline styles instead of a color class. But we will still need to keep the old classes so the blocks properly work on the frontend even if they are never opened on the editor.

If the block's are not opened in the editor and therefore not migrated. They would still keep the old CSS classes. This is why those classes still exist within the style.css file.

Could we leave the attributes as they were instead (keeping the classes and named attributes)? I guess we could keep the old colors as the default table block palette on lib/experimental-default-theme.json. Given that the classes still exist and will always be preset I guess the blocks should still look ok without any migration.

If the table block is given its own custom color palette, as you suggested, with the old colors under the same names, their CSS classes should be unchanged. With that approach, the original backgroundColor attribute could remain as is, instead of migrating it to the style.color.background attribute.

'subtle-light-gray': '#f3f4f5',
'subtle-pale-green': '#e9fbe5',
'subtle-pale-blue': '#e7f5fe',
'subtle-pale-pink': '#fcf0ef',
};

const deprecated = [
// Deprecation migrating table block to use colors block support feature.
{
attributes: {
hasFixedLayout: {
type: 'boolean',
default: false,
},
backgroundColor: {
type: 'string',
},
caption: {
type: 'string',
source: 'html',
selector: 'figcaption',
default: '',
},
head: {
type: 'array',
default: [],
source: 'query',
selector: 'thead tr',
query: {
cells: {
type: 'array',
default: [],
source: 'query',
selector: 'td,th',
query: {
content: {
type: 'string',
source: 'html',
},
tag: {
type: 'string',
default: 'td',
source: 'tag',
},
scope: {
type: 'string',
source: 'attribute',
attribute: 'scope',
},
align: {
type: 'string',
source: 'attribute',
attribute: 'data-align',
},
},
},
},
},
body: {
type: 'array',
default: [],
source: 'query',
selector: 'tbody tr',
query: {
cells: {
type: 'array',
default: [],
source: 'query',
selector: 'td,th',
query: {
content: {
type: 'string',
source: 'html',
},
tag: {
type: 'string',
default: 'td',
source: 'tag',
},
scope: {
type: 'string',
source: 'attribute',
attribute: 'scope',
},
align: {
type: 'string',
source: 'attribute',
attribute: 'data-align',
},
},
},
},
},
foot: {
type: 'array',
default: [],
source: 'query',
selector: 'tfoot tr',
query: {
cells: {
type: 'array',
default: [],
source: 'query',
selector: 'td,th',
query: {
content: {
type: 'string',
source: 'html',
},
tag: {
type: 'string',
default: 'td',
source: 'tag',
},
scope: {
type: 'string',
source: 'attribute',
attribute: 'scope',
},
align: {
type: 'string',
source: 'attribute',
attribute: 'data-align',
},
},
},
},
},
},
supports: {
anchor: true,
align: true,
__experimentalSelector: '.wp-block-table > table',
},
save: ( { attributes } ) => {
const {
hasFixedLayout,
head,
body,
foot,
backgroundColor,
caption,
} = attributes;
const isEmpty = ! head.length && ! body.length && ! foot.length;

if ( isEmpty ) {
return null;
}

const backgroundClass = getColorClassName(
'background-color',
backgroundColor
);

const classes = classnames( backgroundClass, {
'has-fixed-layout': hasFixedLayout,
'has-background': !! backgroundClass,
} );

const hasCaption = ! RichText.isEmpty( caption );

const Section = ( { type, rows } ) => {
if ( ! rows.length ) {
return null;
}

const Tag = `t${ type }`;

return (
<Tag>
{ rows.map( ( { cells }, rowIndex ) => (
<tr key={ rowIndex }>
{ cells.map(
(
{ content, tag, scope, align },
cellIndex
) => {
const cellClasses = classnames( {
[ `has-text-align-${ align }` ]: align,
} );

return (
<RichText.Content
className={
cellClasses
? cellClasses
: undefined
}
data-align={ align }
tagName={ tag }
value={ content }
key={ cellIndex }
scope={
tag === 'th'
? scope
: undefined
}
/>
);
}
) }
</tr>
) ) }
</Tag>
);
};

return (
<figure { ...useBlockProps.save() }>
<table className={ classes === '' ? undefined : classes }>
<Section type="head" rows={ head } />
<Section type="body" rows={ body } />
<Section type="foot" rows={ foot } />
</table>
{ hasCaption && (
<RichText.Content
tagName="figcaption"
value={ caption }
/>
) }
</figure>
);
},
isEligible: ( attributes ) => {
return attributes.backgroundColor && ! attributes.style;
},

// This version is the first to introduce the style attribute to the
// table block. As a result, we'll explicitly override that.
migrate: ( attributes ) => {
return {
...attributes,
backgroundColor: undefined,
style: {
color: {
background: oldColors[ attributes.backgroundColor ],
},
},
};
},
},
{
attributes: {
hasFixedLayout: {
Expand Down
51 changes: 6 additions & 45 deletions packages/block-library/src/table/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,10 @@ import {
InspectorControls,
BlockControls,
RichText,
PanelColorSettings,
createCustomColorsHOC,
BlockIcon,
AlignmentToolbar,
useBlockProps,
__experimentalUseColorProps as useColorProps,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import {
Expand Down Expand Up @@ -58,29 +57,6 @@ import {
isEmptyTableSection,
} from './state';

const BACKGROUND_COLORS = [
aaronrobertshaw marked this conversation as resolved.
Show resolved Hide resolved
{
color: '#f3f4f5',
name: 'Subtle light gray',
slug: 'subtle-light-gray',
},
{
color: '#e9fbe5',
name: 'Subtle pale green',
slug: 'subtle-pale-green',
},
{
color: '#e7f5fe',
name: 'Subtle pale blue',
slug: 'subtle-pale-blue',
},
{
color: '#fcf0ef',
name: 'Subtle pale pink',
slug: 'subtle-pale-pink',
},
];

const ALIGNMENT_CONTROLS = [
{
icon: alignLeft,
Expand All @@ -99,8 +75,6 @@ const ALIGNMENT_CONTROLS = [
},
];

const withCustomBackgroundColors = createCustomColorsHOC( BACKGROUND_COLORS );

const cellAriaLabel = {
head: __( 'Header cell text' ),
body: __( 'Body cell text' ),
Expand All @@ -119,8 +93,6 @@ function TSection( { name, ...props } ) {

function TableEdit( {
attributes,
backgroundColor,
setBackgroundColor,
setAttributes,
insertBlocksAfter,
isSelected,
Expand All @@ -130,6 +102,8 @@ function TableEdit( {
const [ initialColumnCount, setInitialColumnCount ] = useState( 2 );
const [ selectedCell, setSelectedCell ] = useState();

const colorProps = useColorProps( attributes );

/**
* Updates the initial column count used for table creation.
*
Expand Down Expand Up @@ -499,27 +473,14 @@ function TableEdit( {
onChange={ onToggleFooterSection }
/>
</PanelBody>
<PanelColorSettings
title={ __( 'Color' ) }
initialOpen={ false }
colorSettings={ [
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __( 'Background color' ),
disableCustomColors: true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously custom colors were intentionally disabled for the table block. This PR enables custom colors for the table block. Is this change intentional? Should we keep them disabled using lib/experimental-default-theme.json?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the adoption of the colors block support increasing the user's control over colors including font color, it seemed like this was the preferred direction to go. More so when taking into account some of the conversation in #19659.

colors: BACKGROUND_COLORS,
},
] }
/>
</InspectorControls>
) }
{ ! isEmpty && (
<table
className={ classnames( backgroundColor.class, {
className={ classnames( colorProps.className, {
'has-fixed-layout': hasFixedLayout,
'has-background': !! backgroundColor.color,
} ) }
style={ colorProps.style }
>
{ renderedSections }
</table>
Expand Down Expand Up @@ -580,4 +541,4 @@ function TableEdit( {
);
}

export default withCustomBackgroundColors( 'backgroundColor' )( TableEdit );
export default TableEdit;
Loading