@wordpress/block-library
Version:
Block library for the WordPress editor.
432 lines (410 loc) • 10.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _classnames = _interopRequireDefault(require("classnames"));
var _blockEditor = require("@wordpress/block-editor");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
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 = (0, _blockEditor.getColorClassName)('background-color', backgroundColor);
const classes = (0, _classnames.default)(backgroundClass, {
'has-fixed-layout': hasFixedLayout,
'has-background': !!backgroundClass
});
const hasCaption = !_blockEditor.RichText.isEmpty(caption);
const Section = _ref2 => {
let {
type,
rows
} = _ref2;
if (!rows.length) {
return null;
}
const Tag = `t${type}`;
return (0, _element.createElement)(Tag, null, rows.map((_ref3, rowIndex) => {
let {
cells
} = _ref3;
return (0, _element.createElement)("tr", {
key: rowIndex
}, cells.map((_ref4, cellIndex) => {
let {
content,
tag,
scope,
align
} = _ref4;
const cellClasses = (0, _classnames.default)({
[`has-text-align-${align}`]: align
});
return (0, _element.createElement)(_blockEditor.RichText.Content, {
className: cellClasses ? cellClasses : undefined,
"data-align": align,
tagName: tag,
value: content,
key: cellIndex,
scope: tag === 'th' ? scope : undefined
});
}));
}));
};
return (0, _element.createElement)("figure", _blockEditor.useBlockProps.save(), (0, _element.createElement)("table", {
className: classes === '' ? undefined : classes
}, (0, _element.createElement)(Section, {
type: "head",
rows: head
}), (0, _element.createElement)(Section, {
type: "body",
rows: body
}), (0, _element.createElement)(Section, {
type: "foot",
rows: foot
})), hasCaption && (0, _element.createElement)(_blockEditor.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 = (0, _blockEditor.getColorClassName)('background-color', backgroundColor);
const classes = (0, _classnames.default)(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 (0, _element.createElement)(Tag, null, rows.map((_ref7, rowIndex) => {
let {
cells
} = _ref7;
return (0, _element.createElement)("tr", {
key: rowIndex
}, cells.map((_ref8, cellIndex) => {
let {
content,
tag,
scope
} = _ref8;
return (0, _element.createElement)(_blockEditor.RichText.Content, {
tagName: tag,
value: content,
key: cellIndex,
scope: tag === 'th' ? scope : undefined
});
}));
}));
};
return (0, _element.createElement)("table", {
className: classes
}, (0, _element.createElement)(Section, {
type: "head",
rows: head
}), (0, _element.createElement)(Section, {
type: "body",
rows: body
}), (0, _element.createElement)(Section, {
type: "foot",
rows: foot
}));
}
}];
var _default = deprecated;
exports.default = _default;
//# sourceMappingURL=deprecated.js.map