@wordpress/block-library
Version:
Block library for the WordPress editor.
420 lines (403 loc) • 9.59 kB
JavaScript
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
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 = {
'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: _ref => {
let {
attributes
} = _ref;
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 = _ref2 => {
let {
type,
rows
} = _ref2;
if (!rows.length) {
return null;
}
const Tag = `t${type}`;
return createElement(Tag, null, rows.map((_ref3, rowIndex) => {
let {
cells
} = _ref3;
return createElement("tr", {
key: rowIndex
}, cells.map((_ref4, cellIndex) => {
let {
content,
tag,
scope,
align
} = _ref4;
const cellClasses = classnames({
[`has-text-align-${align}`]: align
});
return createElement(RichText.Content, {
className: cellClasses ? cellClasses : undefined,
"data-align": align,
tagName: tag,
value: content,
key: cellIndex,
scope: tag === 'th' ? scope : undefined
});
}));
}));
};
return createElement("figure", useBlockProps.save(), createElement("table", {
className: classes === '' ? undefined : classes
}, createElement(Section, {
type: "head",
rows: head
}), createElement(Section, {
type: "body",
rows: body
}), createElement(Section, {
type: "foot",
rows: foot
})), hasCaption && createElement(RichText.Content, {
tagName: "figcaption",
value: caption
}));
},
isEligible: attributes => {
return attributes.backgroundColor && attributes.backgroundColor in oldColors && !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: {
type: 'boolean',
default: false
},
backgroundColor: {
type: 'string'
},
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'
}
}
}
}
},
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'
}
}
}
}
},
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'
}
}
}
}
}
},
supports,
save(_ref5) {
let {
attributes
} = _ref5;
const {
hasFixedLayout,
head,
body,
foot,
backgroundColor
} = 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 Section = _ref6 => {
let {
type,
rows
} = _ref6;
if (!rows.length) {
return null;
}
const Tag = `t${type}`;
return createElement(Tag, null, rows.map((_ref7, rowIndex) => {
let {
cells
} = _ref7;
return createElement("tr", {
key: rowIndex
}, cells.map((_ref8, cellIndex) => {
let {
content,
tag,
scope
} = _ref8;
return createElement(RichText.Content, {
tagName: tag,
value: content,
key: cellIndex,
scope: tag === 'th' ? scope : undefined
});
}));
}));
};
return createElement("table", {
className: classes
}, createElement(Section, {
type: "head",
rows: head
}), createElement(Section, {
type: "body",
rows: body
}), createElement(Section, {
type: "foot",
rows: foot
}));
}
}];
export default deprecated;
//# sourceMappingURL=deprecated.js.map