From 46dda43e9c92274a15e1caa84be6b44c0c94a0c7 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 8 Apr 2019 12:45:04 +0200 Subject: [PATCH] Refactor Tabel block to use block.json metadata --- packages/block-library/src/table/block.json | 88 ++++++++++ packages/block-library/src/table/index.js | 158 +----------------- packages/block-library/src/table/save.js | 63 +++++++ .../block-library/src/table/transforms.js | 51 ++++++ 4 files changed, 209 insertions(+), 151 deletions(-) create mode 100644 packages/block-library/src/table/block.json create mode 100644 packages/block-library/src/table/save.js create mode 100644 packages/block-library/src/table/transforms.js diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json new file mode 100644 index 00000000000000..1e2d1ebc35abcf --- /dev/null +++ b/packages/block-library/src/table/block.json @@ -0,0 +1,88 @@ +{ + "name": "core/table", + "category": "formatting", + "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" + } + } + } + } + }, + "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" + } + } + } + } + }, + "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" + } + } + } + } + } + } +} diff --git a/packages/block-library/src/table/index.js b/packages/block-library/src/table/index.js index 727edb7c03503c..b5172841a876da 100644 --- a/packages/block-library/src/table/index.js +++ b/packages/block-library/src/table/index.js @@ -1,177 +1,33 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { getPhrasingContentSchema } from '@wordpress/blocks'; -import { RichText, getColorClassName } from '@wordpress/block-editor'; /** * Internal dependencies */ import edit from './edit'; import icon from './icon'; +import metadata from './block.json'; +import save from './save'; +import transforms from './transforms'; -const tableContentPasteSchema = { - tr: { - allowEmpty: true, - children: { - th: { - allowEmpty: true, - children: getPhrasingContentSchema(), - }, - td: { - allowEmpty: true, - children: getPhrasingContentSchema(), - }, - }, - }, -}; +const { name } = metadata; -const tablePasteSchema = { - table: { - children: { - thead: { - allowEmpty: true, - children: tableContentPasteSchema, - }, - tfoot: { - allowEmpty: true, - children: tableContentPasteSchema, - }, - tbody: { - allowEmpty: true, - children: tableContentPasteSchema, - }, - }, - }, -}; - -function getTableSectionAttributeSchema( section ) { - return { - type: 'array', - default: [], - source: 'query', - selector: `t${ section } tr`, - query: { - cells: { - type: 'array', - default: [], - source: 'query', - selector: 'td,th', - query: { - content: { - type: 'string', - source: 'html', - }, - tag: { - type: 'string', - default: 'td', - source: 'tag', - }, - }, - }, - }, - }; -} - -export const name = 'core/table'; +export { metadata, name }; export const settings = { title: __( 'Table' ), description: __( 'Insert a table — perfect for sharing charts and data.' ), icon, - category: 'formatting', - - attributes: { - hasFixedLayout: { - type: 'boolean', - default: false, - }, - backgroundColor: { - type: 'string', - }, - head: getTableSectionAttributeSchema( 'head' ), - body: getTableSectionAttributeSchema( 'body' ), - foot: getTableSectionAttributeSchema( 'foot' ), - }, - styles: [ { name: 'regular', label: _x( 'Default', 'block style' ), isDefault: true }, { name: 'stripes', label: __( 'Stripes' ) }, ], - supports: { align: true, }, - - transforms: { - from: [ - { - type: 'raw', - selector: 'table', - schema: tablePasteSchema, - }, - ], - }, - + transforms, edit, - - save( { attributes } ) { - 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 = ( { type, rows } ) => { - if ( ! rows.length ) { - return null; - } - - const Tag = `t${ type }`; - - return ( - - { rows.map( ( { cells }, rowIndex ) => ( - - { cells.map( ( { content, tag }, cellIndex ) => - - ) } - - ) ) } - - ); - }; - - return ( - -
-
-
-
- ); - }, + save, }; diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js new file mode 100644 index 00000000000000..110a42724b933e --- /dev/null +++ b/packages/block-library/src/table/save.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { RichText, getColorClassName } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + 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 = ( { type, rows } ) => { + if ( ! rows.length ) { + return null; + } + + const Tag = `t${ type }`; + + return ( + + { rows.map( ( { cells }, rowIndex ) => ( + + { cells.map( ( { content, tag }, cellIndex ) => + + ) } + + ) ) } + + ); + }; + + return ( + +
+
+
+
+ ); +} diff --git a/packages/block-library/src/table/transforms.js b/packages/block-library/src/table/transforms.js new file mode 100644 index 00000000000000..13be7752ac7fd1 --- /dev/null +++ b/packages/block-library/src/table/transforms.js @@ -0,0 +1,51 @@ +/** + * WordPress dependencies + */ +import { getPhrasingContentSchema } from '@wordpress/blocks'; + +const tableContentPasteSchema = { + tr: { + allowEmpty: true, + children: { + th: { + allowEmpty: true, + children: getPhrasingContentSchema(), + }, + td: { + allowEmpty: true, + children: getPhrasingContentSchema(), + }, + }, + }, +}; + +const tablePasteSchema = { + table: { + children: { + thead: { + allowEmpty: true, + children: tableContentPasteSchema, + }, + tfoot: { + allowEmpty: true, + children: tableContentPasteSchema, + }, + tbody: { + allowEmpty: true, + children: tableContentPasteSchema, + }, + }, + }, +}; + +const transforms = { + from: [ + { + type: 'raw', + selector: 'table', + schema: tablePasteSchema, + }, + ], +}; + +export default transforms;