From c3f6fb551586c181ec2f496e56c031f57adcb98e Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 4 May 2017 09:12:56 +1000 Subject: [PATCH 01/34] Added table block --- blocks/library/table/index.js | 55 +++++++++++++++++++++++++++++++++ blocks/library/table/style.scss | 0 2 files changed, 55 insertions(+) create mode 100644 blocks/library/table/index.js create mode 100644 blocks/library/table/style.scss diff --git a/blocks/library/table/index.js b/blocks/library/table/index.js new file mode 100644 index 0000000000000..190320feac54f --- /dev/null +++ b/blocks/library/table/index.js @@ -0,0 +1,55 @@ +/** + * Internal dependencies + */ +import './style.scss'; +import { registerBlock, query as hpq } from 'api'; +import Editable from 'components/editable'; + +const { children, prop } = hpq; + +registerBlock( 'core/table', { + title: wp.i18n.__( 'Table' ), + icon: 'editor-table', + category: 'common', + + attributes: { + nodeName: prop( 'table', 'nodeName' ), + values: children( 'tr' ) + }, + + controls: [ + // { + // icon: 'editor-table', + // title: wp.i18n.__( 'Convert to unordered' ), + // isActive: ( { nodeName = 'OL' } ) => nodeName === 'UL', + // onClick( attributes, setAttributes ) { + // } + // }, + ], + + edit( { attributes, setAttributes, focus, setFocus } ) { + const { nodeName = 'TABLE', values = [] } = attributes; + return ( + { + setAttributes( { values: nextValues } ); + } } + value={ values } + focus={ focus } + onFocus={ setFocus } + showAlignments + className="blocks-table" /> + ); + }, + + save( { attributes } ) { + const { nodeName = 'TABLE', values = [] } = attributes; + + return wp.element.createElement( + nodeName.toLowerCase(), + null, + values + ); + } +} ); diff --git a/blocks/library/table/style.scss b/blocks/library/table/style.scss new file mode 100644 index 0000000000000..e69de29bb2d1d From 7eda289d6e62bdfd936e99734ff2c3a6da5c8144 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 5 May 2017 09:59:25 +1000 Subject: [PATCH 02/34] Some exploratory work to see if table functions can be called --- blocks/library/index.js | 1 + blocks/library/table/index.js | 53 ++++++++++++++++++++++----------- blocks/library/table/style.scss | 8 +++++ 3 files changed, 45 insertions(+), 17 deletions(-) diff --git a/blocks/library/index.js b/blocks/library/index.js index 4c2d81d114e10..22b0eeaa68735 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -6,3 +6,4 @@ import './text'; import './list'; import './quote'; import './separator'; +import './table'; diff --git a/blocks/library/table/index.js b/blocks/library/table/index.js index 190320feac54f..3264b4c4b8bd2 100644 --- a/blocks/library/table/index.js +++ b/blocks/library/table/index.js @@ -7,6 +7,14 @@ import Editable from 'components/editable'; const { children, prop } = hpq; +let editable = null; + +function execCommand( commandId ) { + const editorNode = editable !== null ? editable.editorNode : null; + const editor = tinymce.editors.find( ( e ) => e.targetElm === editorNode ); + editor.execCommand( commandId, false, editor ); +} + registerBlock( 'core/table', { title: wp.i18n.__( 'Table' ), icon: 'editor-table', @@ -14,28 +22,39 @@ registerBlock( 'core/table', { attributes: { nodeName: prop( 'table', 'nodeName' ), - values: children( 'tr' ) + rows: children( 'tr' ) }, controls: [ - // { - // icon: 'editor-table', - // title: wp.i18n.__( 'Convert to unordered' ), - // isActive: ( { nodeName = 'OL' } ) => nodeName === 'UL', - // onClick( attributes, setAttributes ) { - // } - // }, + { + icon: 'editor-table', + title: wp.i18n.__( 'Insert Row Before' ), + isActive: () => false, //TODO + onClick() { + execCommand( 'mceTableInsertRowBefore', false ); + } + }, + { + icon: 'editor-table', + title: wp.i18n.__( 'Insert Row After' ), + isActive: () => false, //TODO + onClick() { + execCommand( 'mceTableInsertRowAfter', false ); + } + }, ], edit( { attributes, setAttributes, focus, setFocus } ) { - const { nodeName = 'TABLE', values = [] } = attributes; + const { nodeName = 'TABLE', rows = [

,

] } = attributes; return ( editable = e } tagName={ nodeName.toLowerCase() } - onChange={ ( nextValues ) => { - setAttributes( { values: nextValues } ); + style={ { width: '100%' } } + onChange={ ( nextRows ) => { + setAttributes( { rows: nextRows } ); } } - value={ values } + value={ rows } focus={ focus } onFocus={ setFocus } showAlignments @@ -44,12 +63,12 @@ registerBlock( 'core/table', { }, save( { attributes } ) { - const { nodeName = 'TABLE', values = [] } = attributes; + const { rows = [

,

] } = attributes; - return wp.element.createElement( - nodeName.toLowerCase(), - null, - values + return ( + + { rows } +
); } } ); diff --git a/blocks/library/table/style.scss b/blocks/library/table/style.scss index e69de29bb2d1d..f69b1eb1454ad 100644 --- a/blocks/library/table/style.scss +++ b/blocks/library/table/style.scss @@ -0,0 +1,8 @@ +.blocks-table { + border-collapse: collapse; + border: 1px solid $light-gray-500; + td { + border: 1px solid $light-gray-500; + padding: 15px 7px; + } +} \ No newline at end of file From 462528f7a6ad86cb7797a1a9d4ef982c9fa6b193 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 22 May 2017 14:28:54 +1000 Subject: [PATCH 03/34] Pass out the editor on setup and use it for execCommand --- blocks/editable/index.js | 4 +++ blocks/editable/tinymce.js | 1 + blocks/library/table/index.js | 60 ++++++++++++++++++++++++----------- 3 files changed, 46 insertions(+), 19 deletions(-) diff --git a/blocks/editable/index.js b/blocks/editable/index.js index 0cde867ff9871..eb1509ca2a208 100644 --- a/blocks/editable/index.js +++ b/blocks/editable/index.js @@ -88,6 +88,10 @@ export default class Editable extends wp.element.Component { editor.on( 'focusin', this.onFocus ); editor.on( 'nodechange', this.onNodeChange ); editor.on( 'keydown', this.onKeyDown ); + + if ( this.props.onSetup ) { + this.props.onSetup( editor ); + } } onInit() { diff --git a/blocks/editable/tinymce.js b/blocks/editable/tinymce.js index d718f7a5abbc1..556981b3fabee 100644 --- a/blocks/editable/tinymce.js +++ b/blocks/editable/tinymce.js @@ -31,6 +31,7 @@ export default class TinyMCE extends wp.element.Component { browser_spellcheck: true, entity_encoding: 'raw', convert_urls: false, + plugins: [ 'table' ], setup: ( editor ) => { this.editor = editor; this.props.onSetup( editor ); diff --git a/blocks/library/table/index.js b/blocks/library/table/index.js index 3264b4c4b8bd2..909cf371989f3 100644 --- a/blocks/library/table/index.js +++ b/blocks/library/table/index.js @@ -2,17 +2,17 @@ * Internal dependencies */ import './style.scss'; -import { registerBlock, query as hpq } from 'api'; -import Editable from 'components/editable'; +import { registerBlock, query as hpq } from '../../api'; +import Editable from '../../editable'; const { children, prop } = hpq; -let editable = null; - -function execCommand( commandId ) { - const editorNode = editable !== null ? editable.editorNode : null; - const editor = tinymce.editors.find( ( e ) => e.targetElm === editorNode ); - editor.execCommand( commandId, false, editor ); +function execCommand( command ) { + return ( { editor } ) => { + if ( editor ) { + editor.execCommand( command ); + } + }; } registerBlock( 'core/table', { @@ -27,20 +27,40 @@ registerBlock( 'core/table', { controls: [ { - icon: 'editor-table', + icon: 'table-row-before', title: wp.i18n.__( 'Insert Row Before' ), - isActive: () => false, //TODO - onClick() { - execCommand( 'mceTableInsertRowBefore', false ); - } + isActive: () => false, + onClick: execCommand( 'mceTableInsertRowBefore' ) }, { - icon: 'editor-table', + icon: 'table-row-after', title: wp.i18n.__( 'Insert Row After' ), - isActive: () => false, //TODO - onClick() { - execCommand( 'mceTableInsertRowAfter', false ); - } + isActive: () => false, + onClick: execCommand( 'mceTableInsertRowAfter' ) + }, + { + icon: 'table-row-delete', + title: wp.i18n.__( 'Delete Row' ), + isActive: () => false, + onClick: execCommand( 'mceTableDeleteRow' ) + }, + { + icon: 'table-col-before', + title: wp.i18n.__( 'Insert Column Before' ), + isActive: () => false, + onClick: execCommand( 'mceTableInsertColBefore' ) + }, + { + icon: 'table-col-after', + title: wp.i18n.__( 'Insert Column After' ), + isActive: () => false, + onClick: execCommand( 'mceTableInsertColAfter' ) + }, + { + icon: 'table-col-delete', + title: wp.i18n.__( 'Delete Column' ), + isActive: () => false, + onClick: execCommand( 'mceTableDeleteCol' ) }, ], @@ -48,9 +68,11 @@ registerBlock( 'core/table', { const { nodeName = 'TABLE', rows = [

,

] } = attributes; return ( editable = e } tagName={ nodeName.toLowerCase() } style={ { width: '100%' } } + onSetup={ ( nextEditor ) => { + setAttributes( { editor: nextEditor } ); + } } onChange={ ( nextRows ) => { setAttributes( { rows: nextRows } ); } } From 5bc3a627ea881552f8725626bb3cf602393cbfbc Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 22 May 2017 14:35:38 +1000 Subject: [PATCH 04/34] Renamed table to table2 to avoid collision on merge --- blocks/library/index.js | 2 +- blocks/library/{table => table2}/index.js | 2 +- blocks/library/{table => table2}/style.scss | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename blocks/library/{table => table2}/index.js (98%) rename blocks/library/{table => table2}/style.scss (100%) diff --git a/blocks/library/index.js b/blocks/library/index.js index c5b5f20103d04..8f390da94ae8c 100644 --- a/blocks/library/index.js +++ b/blocks/library/index.js @@ -8,4 +8,4 @@ import './quote'; import './separator'; import './button'; import './pullquote'; -import './table'; +import './table2'; diff --git a/blocks/library/table/index.js b/blocks/library/table2/index.js similarity index 98% rename from blocks/library/table/index.js rename to blocks/library/table2/index.js index 909cf371989f3..bc0d9e88d33db 100644 --- a/blocks/library/table/index.js +++ b/blocks/library/table2/index.js @@ -16,7 +16,7 @@ function execCommand( command ) { } registerBlock( 'core/table', { - title: wp.i18n.__( 'Table' ), + title: wp.i18n.__( 'Table2' ), icon: 'editor-table', category: 'common', diff --git a/blocks/library/table/style.scss b/blocks/library/table2/style.scss similarity index 100% rename from blocks/library/table/style.scss rename to blocks/library/table2/style.scss From 172eb3d096be8060f6deb8f0f2216a8d18c1f78d Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 22 May 2017 14:57:31 +1000 Subject: [PATCH 05/34] Add table plugin via getSettings; fix linter issues --- blocks/library/table2/index.js | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index bc0d9e88d33db..c6768e3532408 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -15,14 +15,14 @@ function execCommand( command ) { }; } -registerBlock( 'core/table', { +registerBlock( 'core/table2', { title: wp.i18n.__( 'Table2' ), icon: 'editor-table', category: 'common', attributes: { nodeName: prop( 'table', 'nodeName' ), - rows: children( 'tr' ) + rows: children( 'tr' ), }, controls: [ @@ -30,37 +30,37 @@ registerBlock( 'core/table', { icon: 'table-row-before', title: wp.i18n.__( 'Insert Row Before' ), isActive: () => false, - onClick: execCommand( 'mceTableInsertRowBefore' ) + onClick: execCommand( 'mceTableInsertRowBefore' ), }, { icon: 'table-row-after', title: wp.i18n.__( 'Insert Row After' ), isActive: () => false, - onClick: execCommand( 'mceTableInsertRowAfter' ) + onClick: execCommand( 'mceTableInsertRowAfter' ), }, { icon: 'table-row-delete', title: wp.i18n.__( 'Delete Row' ), isActive: () => false, - onClick: execCommand( 'mceTableDeleteRow' ) + onClick: execCommand( 'mceTableDeleteRow' ), }, { icon: 'table-col-before', title: wp.i18n.__( 'Insert Column Before' ), isActive: () => false, - onClick: execCommand( 'mceTableInsertColBefore' ) + onClick: execCommand( 'mceTableInsertColBefore' ), }, { icon: 'table-col-after', title: wp.i18n.__( 'Insert Column After' ), isActive: () => false, - onClick: execCommand( 'mceTableInsertColAfter' ) + onClick: execCommand( 'mceTableInsertColAfter' ), }, { icon: 'table-col-delete', title: wp.i18n.__( 'Delete Column' ), isActive: () => false, - onClick: execCommand( 'mceTableDeleteCol' ) + onClick: execCommand( 'mceTableDeleteCol' ), }, ], @@ -69,10 +69,12 @@ registerBlock( 'core/table', { return ( ( { + ...settings, + plugins: ( settings.plugins || [] ).concat( 'table' ), + } ) } style={ { width: '100%' } } - onSetup={ ( nextEditor ) => { - setAttributes( { editor: nextEditor } ); - } } + onSetup={ ( editor ) => setAttributes( { editor } ) } onChange={ ( nextRows ) => { setAttributes( { rows: nextRows } ); } } @@ -92,5 +94,5 @@ registerBlock( 'core/table', { { rows } ); - } + }, } ); From fbaf6a99d74f0127d28edde298f0ee8c5ecd3e01 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 22 May 2017 15:08:13 +1000 Subject: [PATCH 06/34] Added temporary icons --- components/dashicon/index.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/components/dashicon/index.js b/components/dashicon/index.js index 3b17b4d7ebb04..2ffd6f5839e5e 100644 --- a/components/dashicon/index.js +++ b/components/dashicon/index.js @@ -853,6 +853,36 @@ export default class Dashicon extends wp.element.Component { title = 'Store'; path = 'M1 10c.41.29.96.43 1.5.43.55 0 1.09-.14 1.5-.43.62-.46 1-1.17 1-2 0 .83.37 1.54 1 2 .41.29.96.43 1.5.43.55 0 1.09-.14 1.5-.43.62-.46 1-1.17 1-2 0 .83.37 1.54 1 2 .41.29.96.43 1.51.43.54 0 1.08-.14 1.49-.43.62-.46 1-1.17 1-2 0 .83.37 1.54 1 2 .41.29.96.43 1.5.43.55 0 1.09-.14 1.5-.43.63-.46 1-1.17 1-2V7l-3-7H4L0 7v1c0 .83.37 1.54 1 2zm2 8.99h5v-5h4v5h5v-7c-.37-.05-.72-.22-1-.43-.63-.45-1-.73-1-1.56 0 .83-.38 1.11-1 1.56-.41.3-.95.43-1.49.44-.55 0-1.1-.14-1.51-.44-.63-.45-1-.73-1-1.56 0 .83-.38 1.11-1 1.56-.41.3-.95.43-1.5.44-.54 0-1.09-.14-1.5-.44-.63-.45-1-.73-1-1.57 0 .84-.38 1.12-1 1.57-.29.21-.63.38-1 .44v6.99z'; break; + case 'table-col-delete': + title = 'Delete Column'; + // path = 'M320 499.2l64-64v-12.8l-64-64v140.8zM640 422.4l64-64v137.6l-64-64v-9.6zM1024 896v-896h-1024v896h1024zM960 768h-256v-51.2l-12.8 12.8-51.2-51.2v89.6h-256v-89.6l-51.2 51.2-12.8-12.8v51.2h-256v-704h256v118.4l35.2-35.2 28.8 28.8v-115.2h256v115.2l48-48 16 16v-83.2h256v707.2zM672 662.4l-156.8-156.8-163.2 163.2-76.8-76.8 163.2-163.2-156.8-156.8 76.8-76.8 156.8 156.8 160-160 76.8 76.8-160 160 156.8 156.8-76.8 76.8z'; + path = 'M6.4,9.98l1.28,-1.28v-0.256l-1.28,-1.28v2.8160000000000003zM12.8,8.448l1.28,-1.28v2.752l-1.28,-1.28v-0.192zM20.48,17.92v-17.92h-20.48v17.92h20.48zM19.2,15.36h-5.12v-1.024l-0.256,0.256l-1.024,-1.024v1.7919999999999998h-5.12v-1.7919999999999998l-1.024,1.024l-0.256,-0.256v1.024h-5.12v-14.08h5.12v2.3680000000000003l0.7040000000000001,-0.7040000000000001l0.5760000000000001,0.5760000000000001v-2.3040000000000003h5.12v2.3040000000000003l0.96,-0.96l0.32,0.32v-1.6640000000000001h5.12v14.144000000000002zM13.44,13.248l-3.136,-3.136l-3.264,3.264l-1.536,-1.536l3.264,-3.264l-3.136,-3.136l1.536,-1.536l3.136,3.136l3.2,-3.2l1.536,1.536l-3.2,3.2l3.136,3.136l-1.536,1.536z'; + break; + case 'table-col-after': + title = 'Insert Column After'; + // path = 'M704 643.2v-182.4h182.4v-89.6h-182.4v-182.4h-86.4v182.4h-185.6v89.6h185.6v182.4zM0 896v-896h1024v896h-1024zM320 64h-256v192h256v-192zM320 320h-256v192h256v-192zM320 576h-256v192h256v-192zM960 64h-576v704h576v-704z'; + path = 'M14.08,12.864v-3.648h3.648v-1.7919999999999998h-3.648v-3.648h-1.7280000000000002v3.648h-3.7119999999999997v1.7919999999999998h3.7119999999999997v3.648zM0,17.92v-17.92h20.48v17.92h-20.48zM6.4,1.28h-5.12v3.84h5.12v-3.84zM6.4,6.4h-5.12v3.84h5.12v-3.84zM6.4,11.52h-5.12v3.84h5.12v-3.84zM19.2,1.28h-11.52v14.08h11.52v-14.08z'; + break; + case 'table-col-before': + title = 'Insert Column Before'; + // path = 'M320 188.8v182.4h-182.4v89.6h182.4v182.4h86.4v-182.4h185.6v-89.6h-185.6v-182.4zM0 896v-896h1024v896h-1024zM640 64h-576v704h576v-704zM960 64h-256v192h256v-192zM960 320h-256v192h256v-192zM960 576h-256v192h256v-192z'; + path = 'M6.4,3.7760000000000002v3.648h-3.648v1.7919999999999998h3.648v3.648h1.7280000000000002v-3.648h3.7119999999999997v-1.7919999999999998h-3.7119999999999997v-3.648zM0,17.92v-17.92h20.48v17.92h-20.48zM12.8,1.28h-11.52v14.08h11.52v-14.08zM19.2,1.28h-5.12v3.84h5.12v-3.84zM19.2,6.4h-5.12v3.84h5.12v-3.84zM19.2,11.52h-5.12v3.84h5.12v-3.84z'; + break; + case 'table-row-delete': + title = 'Delete Row'; + // path = 'M886.4 572.8l-156.8-156.8 160-160-76.8-76.8-160 160-156.8-156.8-76.8 73.6 160 160-163.2 163.2 76.8 76.8 163.2-163.2 156.8 156.8 73.6-76.8zM0 896v-896h1024v896h-1024zM960 576h-22.4l-64-64h86.4v-192h-89.6l64-64h25.6v-192h-896v192h310.4l64 64h-374.4v192h371.2l-64 64h-307.2v192h896v-192z'; + path = 'M17.728,11.456l-3.136,-3.136l3.2,-3.2l-1.536,-1.536l-3.2,3.2l-3.136,-3.136l-1.536,1.472l3.2,3.2l-3.264,3.264l1.536,1.536l3.264,-3.264l3.136,3.136l1.472,-1.536zM0,17.92v-17.92h20.48v17.92h-20.48zM19.2,11.52h-0.44799999999999995l-1.28,-1.28h1.7280000000000002v-3.84h-1.7919999999999998l1.28,-1.28h0.512v-3.84h-17.92v3.84h6.207999999999999l1.28,1.28h-7.4879999999999995v3.84h7.4239999999999995l-1.28,1.28h-6.144v3.84h17.92v-3.84z'; + break; + case 'table-row-after': + title = 'Insert Row After'; + // path = 'M691.2 508.8h-144v-144h-70.4v144h-144v67.2h144v144h70.4v-144h144zM0 896v-896h1024v896h-1024zM320 64h-256v192h256v-192zM640 64h-256v192h256v-192zM960 64h-256v192h256v-192zM960 316.8h-896v451.2h896v-451.2z'; + path = 'M13.824000000000002,10.176h-2.88v-2.88h-1.4080000000000001v2.88h-2.88v1.344h2.88v2.88h1.4080000000000001v-2.88h2.88zM0,17.92v-17.92h20.48v17.92h-20.48zM6.4,1.28h-5.12v3.84h5.12v-3.84zM12.8,1.28h-5.12v3.84h5.12v-3.84zM19.2,1.28h-5.12v3.84h5.12v-3.84zM19.2,6.336h-17.92v9.024h17.92v-9.024z'; + break; + case 'table-row-before': + title = 'Insert Row Before'; + // path = 'M332.8 323.2h144v144h70.4v-144h144v-67.2h-144v-144h-70.4v144h-144zM0 896v-896h1024v896h-1024zM384 768h256v-192h-256v192zM64 768h256v-192h-256v192zM960 64h-896v451.2h896v-451.2zM960 576h-256v192h256v-192z'; + path = 'M6.656000000000001,6.4639999999999995h2.88v2.88h1.4080000000000001v-2.88h2.88v-1.344h-2.88v-2.88h-1.4080000000000001v2.88h-2.88zM0,17.92v-17.92h20.48v17.92h-20.48zM7.68,15.36h5.12v-3.84h-5.12v3.84zM1.28,15.36h5.12v-3.84h-5.12v3.84zM19.2,1.28h-17.92v9.024h17.92v-9.024zM19.2,11.52h-5.12v3.84h5.12v-3.84z'; + break; case 'tablet': title = 'Tablet'; path = 'M4 2h12c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1zm11 14V4H5v12h10zM6 5h6l-6 5V5z'; From 6347878820e14e629c04d92565e64538d2354b4d Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 22 May 2017 16:14:53 +1000 Subject: [PATCH 07/34] Added css to show table selection --- blocks/library/table2/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blocks/library/table2/style.scss b/blocks/library/table2/style.scss index f69b1eb1454ad..7f8e9c072c8eb 100644 --- a/blocks/library/table2/style.scss +++ b/blocks/library/table2/style.scss @@ -5,4 +5,7 @@ border: 1px solid $light-gray-500; padding: 15px 7px; } + td[data-mce-selected="1"], th[data-mce-selected="1"] { + background-color: $light-gray-500; + } } \ No newline at end of file From e591c3116b3eda88a0da8ea8fdcd27431e9214ec Mon Sep 17 00:00:00 2001 From: James Johnson Date: Tue, 23 May 2017 14:53:40 +1000 Subject: [PATCH 08/34] Moved controls into a menu --- blocks/library/table2/index.js | 8 +-- components/toolbar-menu/index.js | 100 ++++++++++++++++++++++++++++ components/toolbar-menu/style.scss | 59 ++++++++++++++++ editor/modes/visual-editor/block.js | 9 +++ 4 files changed, 169 insertions(+), 7 deletions(-) create mode 100644 components/toolbar-menu/index.js create mode 100644 components/toolbar-menu/style.scss diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index c6768e3532408..449de4e3dcb11 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -25,41 +25,35 @@ registerBlock( 'core/table2', { rows: children( 'tr' ), }, - controls: [ + advControls: [ { icon: 'table-row-before', title: wp.i18n.__( 'Insert Row Before' ), - isActive: () => false, onClick: execCommand( 'mceTableInsertRowBefore' ), }, { icon: 'table-row-after', title: wp.i18n.__( 'Insert Row After' ), - isActive: () => false, onClick: execCommand( 'mceTableInsertRowAfter' ), }, { icon: 'table-row-delete', title: wp.i18n.__( 'Delete Row' ), - isActive: () => false, onClick: execCommand( 'mceTableDeleteRow' ), }, { icon: 'table-col-before', title: wp.i18n.__( 'Insert Column Before' ), - isActive: () => false, onClick: execCommand( 'mceTableInsertColBefore' ), }, { icon: 'table-col-after', title: wp.i18n.__( 'Insert Column After' ), - isActive: () => false, onClick: execCommand( 'mceTableInsertColAfter' ), }, { icon: 'table-col-delete', title: wp.i18n.__( 'Delete Column' ), - isActive: () => false, onClick: execCommand( 'mceTableDeleteCol' ), }, ], diff --git a/components/toolbar-menu/index.js b/components/toolbar-menu/index.js new file mode 100644 index 0000000000000..e0340e5330d6d --- /dev/null +++ b/components/toolbar-menu/index.js @@ -0,0 +1,100 @@ +/** + * External dependencies + */ +import clickOutside from 'react-click-outside'; + +/** + * WordPress dependencies + */ +import IconButton from 'components/icon-button'; +import Dashicon from 'components/dashicon'; + +/** + * Internal dependencies + */ +import './style.scss'; + +class ToolbarMenu extends wp.element.Component { + constructor() { + super( ...arguments ); + this.closeMenu = this.closeMenu.bind( this ); + this.toggleMenu = this.toggleMenu.bind( this ); + this.state = { + open: false, + }; + } + + handleClickOutside() { + if ( ! this.state.open ) { + return; + } + + this.closeMenu(); + } + + closeMenu() { + this.setState( { + open: false, + } ); + } + + toggleMenu() { + this.setState( { + open: ! this.state.open, + } ); + } + + render() { + const { + icon = 'menu', + label, + menuLabel, + controls, + } = this.props; + + if ( ! controls || ! controls.length ) { + return null; + } + + return ( +
+ + + + { this.state.open && +
+ { controls.map( ( control, index ) => ( + { + event.stopPropagation(); + this.closeMenu(); + control.onClick(); + } } + className="components-toolbar-menu__menu-item" + icon={ control.icon } + role="menuitem" + > + { control.title } + + ) ) } +
+ } +
+ ); + } +} + +export default clickOutside( ToolbarMenu ); diff --git a/components/toolbar-menu/style.scss b/components/toolbar-menu/style.scss new file mode 100644 index 0000000000000..bda2ee3572a78 --- /dev/null +++ b/components/toolbar-menu/style.scss @@ -0,0 +1,59 @@ +.components-toolbar-menu { + border: 1px solid $light-gray-500; + box-shadow: $shadow-popover; + background-color: $white; + margin-right: 10px; + font-family: $default-font; + font-size: $default-font-size; + line-height: $default-line-height; + position: relative; +} + +.components-toolbar-menu__toggle { + width: auto; + margin: 3px; + padding: 8px; + + &:focus:before { + top: -3px; + right: -3px; + bottom: -3px; + left: -3px; + } +} + +.components-toolbar-menu__menu { + position: absolute; + top: 43px; + left: 0px; + box-shadow: $shadow-popover; + border: 1px solid $light-gray-500; + background: $white; + padding: 3px 3px 0 3px; + + input { + font-size: 13px; + } +} + +.components-toolbar-menu__menu-item { + width: 100%; + margin-bottom: 3px; + padding: 6px; + background: none; + border: 1px solid transparent; + outline: none; + color: $dark-gray-500; + cursor: pointer; + + &:hover, + &:focus, + &:not(:disabled):hover { + color: $dark-gray-500; + border-color: $dark-gray-500; + } + + .dashicon { + margin-right: 5px; + } +} diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 31b9f020327bb..bf4b08beeae36 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -10,6 +10,7 @@ import { partial } from 'lodash'; * WordPress dependencies */ import Toolbar from 'components/toolbar'; +import ToolbarMenu from 'components/toolbar-menu'; /** * Internal dependencies @@ -209,6 +210,14 @@ class VisualEditorBlock extends wp.element.Component { } ) ) } /> ) } + { !! settings.advControls && ( + ( { + ...control, + onClick: () => control.onClick( block.attributes, this.setAttributes ), + } ) ) } /> + ) } }
From 7af4bba1d8ca0d10df61be69debfe914b55b18e5 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Tue, 23 May 2017 16:14:59 +1000 Subject: [PATCH 09/34] Changed the icon used by the menu --- blocks/library/table2/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 449de4e3dcb11..a2b367940cea9 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -25,6 +25,8 @@ registerBlock( 'core/table2', { rows: children( 'tr' ), }, + advIcon: 'editor-table', + advControls: [ { icon: 'table-row-before', From 183bb4df45ff7fe15c4121390385fab4e145192f Mon Sep 17 00:00:00 2001 From: James Johnson Date: Wed, 24 May 2017 11:22:28 +1000 Subject: [PATCH 10/34] Added the alignment modes and matched the styling of the existing table --- blocks/library/table2/index.js | 48 ++++++++++++++++++++++++++++++++ blocks/library/table2/style.scss | 39 +++++++++++++++++++------- 2 files changed, 77 insertions(+), 10 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index a2b367940cea9..ced74834cd824 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -7,6 +7,20 @@ import Editable from '../../editable'; const { children, prop } = hpq; +/** + * Returns an attribute setter with behavior that if the target value is + * already the assigned attribute value, it will be set to undefined. + * + * @param {string} align Alignment value + * @return {Function} Attribute setter + */ +function toggleAlignment( align ) { + return ( attributes, setAttributes ) => { + const nextAlign = attributes.align === align ? undefined : align; + setAttributes( { align: nextAlign } ); + }; +} + function execCommand( command ) { return ( { editor } ) => { if ( editor ) { @@ -25,6 +39,40 @@ registerBlock( 'core/table2', { rows: children( 'tr' ), }, + controls: [ + { + icon: 'align-left', + title: wp.i18n.__( 'Align left' ), + isActive: ( { align } ) => 'left' === align, + onClick: toggleAlignment( 'left' ), + }, + { + icon: 'align-center', + title: wp.i18n.__( 'Align center' ), + isActive: ( { align } ) => 'center' === align, + onClick: toggleAlignment( 'center' ), + }, + { + icon: 'align-right', + title: wp.i18n.__( 'Align right' ), + isActive: ( { align } ) => 'right' === align, + onClick: toggleAlignment( 'right' ), + }, + { + icon: 'align-full-width', + title: wp.i18n.__( 'Wide width' ), + isActive: ( { align } ) => 'wide' === align, + onClick: toggleAlignment( 'wide' ), + }, + ], + + getEditWrapperProps( attributes ) { + const { align } = attributes; + if ( 'left' === align || 'right' === align || 'wide' === align ) { + return { 'data-align': align }; + } + }, + advIcon: 'editor-table', advControls: [ diff --git a/blocks/library/table2/style.scss b/blocks/library/table2/style.scss index 7f8e9c072c8eb..c8fd688c578e3 100644 --- a/blocks/library/table2/style.scss +++ b/blocks/library/table2/style.scss @@ -1,11 +1,30 @@ -.blocks-table { - border-collapse: collapse; - border: 1px solid $light-gray-500; - td { - border: 1px solid $light-gray-500; - padding: 15px 7px; - } - td[data-mce-selected="1"], th[data-mce-selected="1"] { - background-color: $light-gray-500; - } +.editor-visual-editor__block[data-type="core/table2"] { + table { + border-collapse: collapse; + } + + td, th { + padding: 0.5em; + border: 1px solid currentColor; + } + + td[data-mce-selected="1"], th[data-mce-selected="1"] { + background-color: $light-gray-500; + } + + &[data-align="left"], + &[data-align="right"] { + min-width: 33%; + max-width: 50%; + } + + &[data-align="left"] { + float: left; + margin-right: $block-padding; + } + + &[data-align="right"] { + float: right; + margin-left: $block-padding; + } } \ No newline at end of file From 6d1ba0fc08f4552b00df569a3912e479170e6e5b Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 26 May 2017 16:48:02 +1000 Subject: [PATCH 11/34] Added serialization test --- blocks/library/table2/index.js | 32 ++- blocks/test/fixtures/core-table2.html | 49 +++++ blocks/test/fixtures/core-table2.json | 201 ++++++++++++++++++ .../test/fixtures/core-table2.serialized.html | 49 +++++ 4 files changed, 323 insertions(+), 8 deletions(-) create mode 100644 blocks/test/fixtures/core-table2.html create mode 100644 blocks/test/fixtures/core-table2.json create mode 100644 blocks/test/fixtures/core-table2.serialized.html diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index ced74834cd824..8bd5b65c54617 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -29,6 +29,12 @@ function execCommand( command ) { }; } +function internalValue( defaultValue ) { + const thunk = () => defaultValue; + thunk._wpBlocksKnownMatcher = true; + return thunk; +} + registerBlock( 'core/table2', { title: wp.i18n.__( 'Table2' ), icon: 'editor-table', @@ -36,7 +42,18 @@ registerBlock( 'core/table2', { attributes: { nodeName: prop( 'table', 'nodeName' ), - rows: children( 'tr' ), + content: children( 'table' ), + editor: internalValue( null ), + }, + + defaultAttributes: { + nodeName: 'TABLE', + content: [ + +

+

+ , + ], }, controls: [ @@ -109,7 +126,7 @@ registerBlock( 'core/table2', { ], edit( { attributes, setAttributes, focus, setFocus } ) { - const { nodeName = 'TABLE', rows = [

,

] } = attributes; + const { nodeName, content } = attributes; return ( setAttributes( { editor } ) } - onChange={ ( nextRows ) => { - setAttributes( { rows: nextRows } ); + onChange={ ( nextContent ) => { + setAttributes( { content: nextContent } ); } } - value={ rows } + value={ content } focus={ focus } onFocus={ setFocus } showAlignments @@ -131,11 +148,10 @@ registerBlock( 'core/table2', { }, save( { attributes } ) { - const { rows = [

,

] } = attributes; - + const { content } = attributes; return ( - { rows } + { content }
); }, diff --git a/blocks/test/fixtures/core-table2.html b/blocks/test/fixtures/core-table2.html new file mode 100644 index 0000000000000..6b5205d3a0b45 --- /dev/null +++ b/blocks/test/fixtures/core-table2.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VersionMusicianDate
.70No musician chosen.May 27, 2003
1.0Miles DavisJanuary 3, 2004
Lots of versions skipped, see the full list……
4.4Clifford BrownDecember 8, 2015
4.5Coleman HawkinsApril 12, 2016
4.6Pepper AdamsAugust 16, 2016
4.7Sarah VaughanDecember 6, 2016
+ + diff --git a/blocks/test/fixtures/core-table2.json b/blocks/test/fixtures/core-table2.json new file mode 100644 index 0000000000000..11128686e72b5 --- /dev/null +++ b/blocks/test/fixtures/core-table2.json @@ -0,0 +1,201 @@ +[ + { + "uid": "_uid_0", + "blockType": "core/table2", + "attributes": { + "nodeName": "TABLE", + "content": [ + { + "type": "thead", + "children": { + "type": "tr", + "children": [ + { + "type": "th", + "children": "Version" + }, + { + "type": "th", + "children": "Musician" + }, + { + "type": "th", + "children": "Date" + } + ] + } + }, + { + "type": "tbody", + "children": [ + { + "type": "tr", + "children": [ + { + "type": "td", + "children": { + "type": "a", + "attributes": { + "href": "https://wordpress.org/news/2003/05/wordpress-now-available/" + }, + "children": ".70" + } + }, + { + "type": "td", + "children": "No musician chosen." + }, + { + "type": "td", + "children": "May 27, 2003" + } + ] + }, + { + "type": "tr", + "children": [ + { + "type": "td", + "children": { + "type": "a", + "attributes": { + "href": "https://wordpress.org/news/2004/01/wordpress-10/" + }, + "children": "1.0" + } + }, + { + "type": "td", + "children": "Miles Davis" + }, + { + "type": "td", + "children": "January 3, 2004" + } + ] + }, + { + "type": "tr", + "children": [ + { + "type": "td", + "children": [ + "Lots of versions skipped, see ", + { + "type": "a", + "attributes": { + "href": "https://codex.wordpress.org/WordPress_Versions" + }, + "children": "the full list" + } + ] + }, + { + "type": "td", + "children": "…" + }, + { + "type": "td", + "children": "…" + } + ] + }, + { + "type": "tr", + "children": [ + { + "type": "td", + "children": { + "type": "a", + "attributes": { + "href": "https://wordpress.org/news/2015/12/clifford/" + }, + "children": "4.4" + } + }, + { + "type": "td", + "children": "Clifford Brown" + }, + { + "type": "td", + "children": "December 8, 2015" + } + ] + }, + { + "type": "tr", + "children": [ + { + "type": "td", + "children": { + "type": "a", + "attributes": { + "href": "https://wordpress.org/news/2016/04/coleman/" + }, + "children": "4.5" + } + }, + { + "type": "td", + "children": "Coleman Hawkins" + }, + { + "type": "td", + "children": "April 12, 2016" + } + ] + }, + { + "type": "tr", + "children": [ + { + "type": "td", + "children": { + "type": "a", + "attributes": { + "href": "https://wordpress.org/news/2016/08/pepper/" + }, + "children": "4.6" + } + }, + { + "type": "td", + "children": "Pepper Adams" + }, + { + "type": "td", + "children": "August 16, 2016" + } + ] + }, + { + "type": "tr", + "children": [ + { + "type": "td", + "children": { + "type": "a", + "attributes": { + "href": "https://wordpress.org/news/2016/12/vaughan/" + }, + "children": "4.7" + } + }, + { + "type": "td", + "children": "Sarah Vaughan" + }, + { + "type": "td", + "children": "December 6, 2016" + } + ] + } + ] + } + ], + "editor": null + } + } +] diff --git a/blocks/test/fixtures/core-table2.serialized.html b/blocks/test/fixtures/core-table2.serialized.html new file mode 100644 index 0000000000000..69383840be9dd --- /dev/null +++ b/blocks/test/fixtures/core-table2.serialized.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VersionMusicianDate
.70No musician chosen.May 27, 2003
1.0Miles DavisJanuary 3, 2004
Lots of versions skipped, see the full list……
4.4Clifford BrownDecember 8, 2015
4.5Coleman HawkinsApril 12, 2016
4.6Pepper AdamsAugust 16, 2016
4.7Sarah VaughanDecember 6, 2016
+ + From e60070bba590a3ba0c9e3abe582704e4aa01946c Mon Sep 17 00:00:00 2001 From: James Johnson Date: Wed, 31 May 2017 14:35:28 +1000 Subject: [PATCH 12/34] Moved the editor object into react component private state --- blocks/block-menu/index.js | 22 +++++++ blocks/library/table2/index.js | 72 ++--------------------- blocks/library/table2/table-block.js | 85 +++++++++++++++++++++++++++ blocks/test/fixtures/core-table2.json | 4 +- components/toolbar-menu/style.scss | 4 +- editor/modes/visual-editor/block.js | 9 +-- 6 files changed, 117 insertions(+), 79 deletions(-) create mode 100644 blocks/block-menu/index.js create mode 100644 blocks/library/table2/table-block.js diff --git a/blocks/block-menu/index.js b/blocks/block-menu/index.js new file mode 100644 index 0000000000000..1af8a060f6ac1 --- /dev/null +++ b/blocks/block-menu/index.js @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import { Fill } from 'react-slot-fill'; + +/** + * WordPress dependencies + */ +import { ToolbarMenu } from 'components'; + +export default function BlockMenu( { icon, label, menuLabel, controls } ) { + return ( + + + + ); +} diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 8bd5b65c54617..5521a052b1d0d 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -3,9 +3,9 @@ */ import './style.scss'; import { registerBlock, query as hpq } from '../../api'; -import Editable from '../../editable'; +import TableBlock from './table-block'; -const { children, prop } = hpq; +const { children } = hpq; /** * Returns an attribute setter with behavior that if the target value is @@ -21,33 +21,16 @@ function toggleAlignment( align ) { }; } -function execCommand( command ) { - return ( { editor } ) => { - if ( editor ) { - editor.execCommand( command ); - } - }; -} - -function internalValue( defaultValue ) { - const thunk = () => defaultValue; - thunk._wpBlocksKnownMatcher = true; - return thunk; -} - registerBlock( 'core/table2', { title: wp.i18n.__( 'Table2' ), icon: 'editor-table', category: 'common', attributes: { - nodeName: prop( 'table', 'nodeName' ), content: children( 'table' ), - editor: internalValue( null ), }, defaultAttributes: { - nodeName: 'TABLE', content: [

@@ -90,60 +73,17 @@ registerBlock( 'core/table2', { } }, - advIcon: 'editor-table', - - advControls: [ - { - icon: 'table-row-before', - title: wp.i18n.__( 'Insert Row Before' ), - onClick: execCommand( 'mceTableInsertRowBefore' ), - }, - { - icon: 'table-row-after', - title: wp.i18n.__( 'Insert Row After' ), - onClick: execCommand( 'mceTableInsertRowAfter' ), - }, - { - icon: 'table-row-delete', - title: wp.i18n.__( 'Delete Row' ), - onClick: execCommand( 'mceTableDeleteRow' ), - }, - { - icon: 'table-col-before', - title: wp.i18n.__( 'Insert Column Before' ), - onClick: execCommand( 'mceTableInsertColBefore' ), - }, - { - icon: 'table-col-after', - title: wp.i18n.__( 'Insert Column After' ), - onClick: execCommand( 'mceTableInsertColAfter' ), - }, - { - icon: 'table-col-delete', - title: wp.i18n.__( 'Delete Column' ), - onClick: execCommand( 'mceTableDeleteCol' ), - }, - ], - edit( { attributes, setAttributes, focus, setFocus } ) { - const { nodeName, content } = attributes; + const { content } = attributes; return ( - ( { - ...settings, - plugins: ( settings.plugins || [] ).concat( 'table' ), - } ) } - style={ { width: '100%' } } - onSetup={ ( editor ) => setAttributes( { editor } ) } + { setAttributes( { content: nextContent } ); } } - value={ content } + content={ content } focus={ focus } onFocus={ setFocus } - showAlignments - className="blocks-table" /> + /> ); }, diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js new file mode 100644 index 0000000000000..fc86f98bce42f --- /dev/null +++ b/blocks/library/table2/table-block.js @@ -0,0 +1,85 @@ +import Editable from '../../editable'; +import BlockMenu from '../../block-menu'; + +function execCommand( command ) { + return ( editor ) => { + if ( editor ) { + editor.execCommand( command ); + } + }; +} + +const TABLE_CONTROLS = [ + { + icon: 'table-row-before', + title: wp.i18n.__( 'Insert Row Before' ), + onClick: execCommand( 'mceTableInsertRowBefore' ), + }, + { + icon: 'table-row-after', + title: wp.i18n.__( 'Insert Row After' ), + onClick: execCommand( 'mceTableInsertRowAfter' ), + }, + { + icon: 'table-row-delete', + title: wp.i18n.__( 'Delete Row' ), + onClick: execCommand( 'mceTableDeleteRow' ), + }, + { + icon: 'table-col-before', + title: wp.i18n.__( 'Insert Column Before' ), + onClick: execCommand( 'mceTableInsertColBefore' ), + }, + { + icon: 'table-col-after', + title: wp.i18n.__( 'Insert Column After' ), + onClick: execCommand( 'mceTableInsertColAfter' ), + }, + { + icon: 'table-col-delete', + title: wp.i18n.__( 'Delete Column' ), + onClick: execCommand( 'mceTableDeleteCol' ), + }, +]; + +export default class TableBlock extends wp.element.Component { + constructor() { + super(); + this.state = { + editor: null, + }; + } + + render() { + const { content, focus, onFocus, onChange } = this.props; + + return [ + focus && ( + ( { + ...control, + onClick: () => control.onClick( this.state.editor ), + } ) ) } + /> + ), + ( { + ...settings, + plugins: ( settings.plugins || [] ).concat( 'table' ), + } ) } + style={ { width: '100%' } } + onSetup={ ( editor ) => this.setState( { editor } ) } + onChange={ onChange } + value={ content } + focus={ focus } + onFocus={ onFocus } + showAlignments + className="blocks-table" />, + ]; + } +} diff --git a/blocks/test/fixtures/core-table2.json b/blocks/test/fixtures/core-table2.json index 11128686e72b5..af589cb3f5e47 100644 --- a/blocks/test/fixtures/core-table2.json +++ b/blocks/test/fixtures/core-table2.json @@ -3,7 +3,6 @@ "uid": "_uid_0", "blockType": "core/table2", "attributes": { - "nodeName": "TABLE", "content": [ { "type": "thead", @@ -194,8 +193,7 @@ } ] } - ], - "editor": null + ] } } ] diff --git a/components/toolbar-menu/style.scss b/components/toolbar-menu/style.scss index bda2ee3572a78..2a85d7e845e8e 100644 --- a/components/toolbar-menu/style.scss +++ b/components/toolbar-menu/style.scss @@ -11,7 +11,7 @@ .components-toolbar-menu__toggle { width: auto; - margin: 3px; + margin: 0px; padding: 8px; &:focus:before { @@ -24,7 +24,7 @@ .components-toolbar-menu__menu { position: absolute; - top: 43px; + top: $block-controls-height - 1px; left: 0px; box-shadow: $shadow-popover; border: 1px solid $light-gray-500; diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 45fb0c5cb8e15..8e955452a4171 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -253,14 +253,7 @@ class VisualEditorBlock extends wp.element.Component { } ) ) } /> ) } - { !! settings.advControls && ( - ( { - ...control, - onClick: () => control.onClick( block.attributes, this.setAttributes ), - } ) ) } /> - ) } +
} From 9a1ef91bd38fb858075ded08438a8889484b31b8 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Wed, 31 May 2017 16:10:06 +1000 Subject: [PATCH 13/34] Fixed unused import --- editor/modes/visual-editor/block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 8e955452a4171..be11fddb33d41 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -11,7 +11,7 @@ import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'; * WordPress dependencies */ import { Children } from 'element'; -import { Toolbar, ToolbarMenu } from 'components'; +import { Toolbar } from 'components'; import { BACKSPACE, ESCAPE } from 'utils/keycodes'; /** From 3ec950663d0b6f8345d8f81f7970b29d938c3dee Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 1 Jun 2017 09:22:56 +1000 Subject: [PATCH 14/34] Fixed spaces used for indenting in toolbar-menu/style.scss --- components/toolbar-menu/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/toolbar-menu/style.scss b/components/toolbar-menu/style.scss index 2a85d7e845e8e..b4da9730f60ee 100644 --- a/components/toolbar-menu/style.scss +++ b/components/toolbar-menu/style.scss @@ -6,7 +6,7 @@ font-family: $default-font; font-size: $default-font-size; line-height: $default-line-height; - position: relative; + position: relative; } .components-toolbar-menu__toggle { From bd1a1830dc9bc14078f23d4d3ae61f478135b76b Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 1 Jun 2017 13:21:51 +1000 Subject: [PATCH 15/34] Move alternate table block to formatting category to match existing table --- blocks/library/table2/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 5521a052b1d0d..683f57fb3451b 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -24,7 +24,7 @@ function toggleAlignment( align ) { registerBlock( 'core/table2', { title: wp.i18n.__( 'Table2' ), icon: 'editor-table', - category: 'common', + category: 'formatting', attributes: { content: children( 'table' ), From ed2d5a5d03ece68a87d26159a4b3f698c1f14c53 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 1 Jun 2017 13:22:11 +1000 Subject: [PATCH 16/34] Vendor the table plugin --- index.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/index.php b/index.php index fcca4adf570a3..4976d01ec5af1 100644 --- a/index.php +++ b/index.php @@ -187,6 +187,11 @@ function gutenberg_register_scripts() { 'https://fiddle.azurewebsites.net/tinymce/nightly/plugins/lists/plugin' . $suffix . '.js', array( 'tinymce-nightly' ) ); + gutenberg_register_vendor_script( + 'tinymce-nightly-table', + 'https://fiddle.azurewebsites.net/tinymce/nightly/plugins/table/plugin' . $suffix . '.js', + array( 'tinymce-nightly' ) + ); // Editor Scripts. wp_register_script( @@ -248,7 +253,7 @@ function gutenberg_register_scripts() { wp_register_script( 'wp-blocks', plugins_url( 'blocks/build/index.js', __FILE__ ), - array( 'wp-element', 'wp-components', 'wp-utils', 'tinymce-nightly', 'tinymce-nightly-lists' ), + array( 'wp-element', 'wp-components', 'wp-utils', 'tinymce-nightly', 'tinymce-nightly-lists', 'tinymce-nightly-table' ), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/build/index.js' ) ); From e4871d3021dc027cf02582ada1a9623279923d34 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 1 Jun 2017 13:48:14 +1000 Subject: [PATCH 17/34] Removed class and style attributes from table --- blocks/library/table2/index.js | 2 +- blocks/library/table2/style.scss | 1 + blocks/library/table2/table-block.js | 4 +--- blocks/test/fixtures/core-table2.serialized.html | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 683f57fb3451b..465a8fecd57b4 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -90,7 +90,7 @@ registerBlock( 'core/table2', { save( { attributes } ) { const { content } = attributes; return ( - +
{ content }
); diff --git a/blocks/library/table2/style.scss b/blocks/library/table2/style.scss index c8fd688c578e3..f57af9450cb77 100644 --- a/blocks/library/table2/style.scss +++ b/blocks/library/table2/style.scss @@ -1,6 +1,7 @@ .editor-visual-editor__block[data-type="core/table2"] { table { border-collapse: collapse; + width: 100%; } td, th { diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index fc86f98bce42f..11adf33557f18 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -72,14 +72,12 @@ export default class TableBlock extends wp.element.Component { ...settings, plugins: ( settings.plugins || [] ).concat( 'table' ), } ) } - style={ { width: '100%' } } onSetup={ ( editor ) => this.setState( { editor } ) } onChange={ onChange } value={ content } focus={ focus } onFocus={ onFocus } - showAlignments - className="blocks-table" />, + showAlignments />, ]; } } diff --git a/blocks/test/fixtures/core-table2.serialized.html b/blocks/test/fixtures/core-table2.serialized.html index 69383840be9dd..61719fd205535 100644 --- a/blocks/test/fixtures/core-table2.serialized.html +++ b/blocks/test/fixtures/core-table2.serialized.html @@ -1,5 +1,5 @@ - +
From a15a7811336bfc8f32cb673e62dc58682a6c6a5c Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 1 Jun 2017 14:27:01 +1000 Subject: [PATCH 18/34] Fixed spaces in indentation of table2/style.scss --- blocks/library/table2/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/table2/style.scss b/blocks/library/table2/style.scss index f57af9450cb77..98ac635bc5416 100644 --- a/blocks/library/table2/style.scss +++ b/blocks/library/table2/style.scss @@ -15,7 +15,7 @@ &[data-align="left"], &[data-align="right"] { - min-width: 33%; + min-width: 33%; max-width: 50%; } From 95c353d5fe086b593bebabb377b4f57e97c4c0a3 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Thu, 1 Jun 2017 14:37:39 +1000 Subject: [PATCH 19/34] Removed the comments with the unscaled SVG paths --- components/dashicon/index.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/dashicon/index.js b/components/dashicon/index.js index aa5eebde2e5ee..ac01dbc72adb2 100644 --- a/components/dashicon/index.js +++ b/components/dashicon/index.js @@ -855,32 +855,26 @@ export default class Dashicon extends wp.element.Component { break; case 'table-col-delete': title = 'Delete Column'; - // path = 'M320 499.2l64-64v-12.8l-64-64v140.8zM640 422.4l64-64v137.6l-64-64v-9.6zM1024 896v-896h-1024v896h1024zM960 768h-256v-51.2l-12.8 12.8-51.2-51.2v89.6h-256v-89.6l-51.2 51.2-12.8-12.8v51.2h-256v-704h256v118.4l35.2-35.2 28.8 28.8v-115.2h256v115.2l48-48 16 16v-83.2h256v707.2zM672 662.4l-156.8-156.8-163.2 163.2-76.8-76.8 163.2-163.2-156.8-156.8 76.8-76.8 156.8 156.8 160-160 76.8 76.8-160 160 156.8 156.8-76.8 76.8z'; path = 'M6.4,9.98l1.28,-1.28v-0.256l-1.28,-1.28v2.8160000000000003zM12.8,8.448l1.28,-1.28v2.752l-1.28,-1.28v-0.192zM20.48,17.92v-17.92h-20.48v17.92h20.48zM19.2,15.36h-5.12v-1.024l-0.256,0.256l-1.024,-1.024v1.7919999999999998h-5.12v-1.7919999999999998l-1.024,1.024l-0.256,-0.256v1.024h-5.12v-14.08h5.12v2.3680000000000003l0.7040000000000001,-0.7040000000000001l0.5760000000000001,0.5760000000000001v-2.3040000000000003h5.12v2.3040000000000003l0.96,-0.96l0.32,0.32v-1.6640000000000001h5.12v14.144000000000002zM13.44,13.248l-3.136,-3.136l-3.264,3.264l-1.536,-1.536l3.264,-3.264l-3.136,-3.136l1.536,-1.536l3.136,3.136l3.2,-3.2l1.536,1.536l-3.2,3.2l3.136,3.136l-1.536,1.536z'; break; case 'table-col-after': title = 'Insert Column After'; - // path = 'M704 643.2v-182.4h182.4v-89.6h-182.4v-182.4h-86.4v182.4h-185.6v89.6h185.6v182.4zM0 896v-896h1024v896h-1024zM320 64h-256v192h256v-192zM320 320h-256v192h256v-192zM320 576h-256v192h256v-192zM960 64h-576v704h576v-704z'; path = 'M14.08,12.864v-3.648h3.648v-1.7919999999999998h-3.648v-3.648h-1.7280000000000002v3.648h-3.7119999999999997v1.7919999999999998h3.7119999999999997v3.648zM0,17.92v-17.92h20.48v17.92h-20.48zM6.4,1.28h-5.12v3.84h5.12v-3.84zM6.4,6.4h-5.12v3.84h5.12v-3.84zM6.4,11.52h-5.12v3.84h5.12v-3.84zM19.2,1.28h-11.52v14.08h11.52v-14.08z'; break; case 'table-col-before': title = 'Insert Column Before'; - // path = 'M320 188.8v182.4h-182.4v89.6h182.4v182.4h86.4v-182.4h185.6v-89.6h-185.6v-182.4zM0 896v-896h1024v896h-1024zM640 64h-576v704h576v-704zM960 64h-256v192h256v-192zM960 320h-256v192h256v-192zM960 576h-256v192h256v-192z'; path = 'M6.4,3.7760000000000002v3.648h-3.648v1.7919999999999998h3.648v3.648h1.7280000000000002v-3.648h3.7119999999999997v-1.7919999999999998h-3.7119999999999997v-3.648zM0,17.92v-17.92h20.48v17.92h-20.48zM12.8,1.28h-11.52v14.08h11.52v-14.08zM19.2,1.28h-5.12v3.84h5.12v-3.84zM19.2,6.4h-5.12v3.84h5.12v-3.84zM19.2,11.52h-5.12v3.84h5.12v-3.84z'; break; case 'table-row-delete': title = 'Delete Row'; - // path = 'M886.4 572.8l-156.8-156.8 160-160-76.8-76.8-160 160-156.8-156.8-76.8 73.6 160 160-163.2 163.2 76.8 76.8 163.2-163.2 156.8 156.8 73.6-76.8zM0 896v-896h1024v896h-1024zM960 576h-22.4l-64-64h86.4v-192h-89.6l64-64h25.6v-192h-896v192h310.4l64 64h-374.4v192h371.2l-64 64h-307.2v192h896v-192z'; path = 'M17.728,11.456l-3.136,-3.136l3.2,-3.2l-1.536,-1.536l-3.2,3.2l-3.136,-3.136l-1.536,1.472l3.2,3.2l-3.264,3.264l1.536,1.536l3.264,-3.264l3.136,3.136l1.472,-1.536zM0,17.92v-17.92h20.48v17.92h-20.48zM19.2,11.52h-0.44799999999999995l-1.28,-1.28h1.7280000000000002v-3.84h-1.7919999999999998l1.28,-1.28h0.512v-3.84h-17.92v3.84h6.207999999999999l1.28,1.28h-7.4879999999999995v3.84h7.4239999999999995l-1.28,1.28h-6.144v3.84h17.92v-3.84z'; break; case 'table-row-after': title = 'Insert Row After'; - // path = 'M691.2 508.8h-144v-144h-70.4v144h-144v67.2h144v144h70.4v-144h144zM0 896v-896h1024v896h-1024zM320 64h-256v192h256v-192zM640 64h-256v192h256v-192zM960 64h-256v192h256v-192zM960 316.8h-896v451.2h896v-451.2z'; path = 'M13.824000000000002,10.176h-2.88v-2.88h-1.4080000000000001v2.88h-2.88v1.344h2.88v2.88h1.4080000000000001v-2.88h2.88zM0,17.92v-17.92h20.48v17.92h-20.48zM6.4,1.28h-5.12v3.84h5.12v-3.84zM12.8,1.28h-5.12v3.84h5.12v-3.84zM19.2,1.28h-5.12v3.84h5.12v-3.84zM19.2,6.336h-17.92v9.024h17.92v-9.024z'; break; case 'table-row-before': title = 'Insert Row Before'; - // path = 'M332.8 323.2h144v144h70.4v-144h144v-67.2h-144v-144h-70.4v144h-144zM0 896v-896h1024v896h-1024zM384 768h256v-192h-256v192zM64 768h256v-192h-256v192zM960 64h-896v451.2h896v-451.2zM960 576h-256v192h256v-192z'; path = 'M6.656000000000001,6.4639999999999995h2.88v2.88h1.4080000000000001v-2.88h2.88v-1.344h-2.88v-2.88h-1.4080000000000001v2.88h-2.88zM0,17.92v-17.92h20.48v17.92h-20.48zM7.68,15.36h5.12v-3.84h-5.12v3.84zM1.28,15.36h5.12v-3.84h-5.12v3.84zM19.2,1.28h-17.92v9.024h17.92v-9.024zM19.2,11.52h-5.12v3.84h5.12v-3.84z'; break; case 'tablet': From 7b08fa104dbb5440cd04e6e9ff25c9968f5158da Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 2 Jun 2017 10:54:27 +1000 Subject: [PATCH 20/34] Updated for rename of registerBlock to registerBlockType --- blocks/library/table2/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 465a8fecd57b4..6f27a52cb2f40 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -2,7 +2,7 @@ * Internal dependencies */ import './style.scss'; -import { registerBlock, query as hpq } from '../../api'; +import { registerBlockType, query as hpq } from '../../api'; import TableBlock from './table-block'; const { children } = hpq; @@ -21,7 +21,7 @@ function toggleAlignment( align ) { }; } -registerBlock( 'core/table2', { +registerBlockType( 'core/table2', { title: wp.i18n.__( 'Table2' ), icon: 'editor-table', category: 'formatting', From be1791bebbdea6b59fd9b5c61900bc0fe4daac03 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 26 Jun 2017 15:38:29 +1000 Subject: [PATCH 21/34] Fixed use of now removed title variable in dashicons --- components/dashicon/index.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/components/dashicon/index.js b/components/dashicon/index.js index a1f82ef2e1411..5e17ba3d379ff 100644 --- a/components/dashicon/index.js +++ b/components/dashicon/index.js @@ -652,27 +652,21 @@ export default class Dashicon extends wp.element.Component { path = 'M1 10c.41.29.96.43 1.5.43.55 0 1.09-.14 1.5-.43.62-.46 1-1.17 1-2 0 .83.37 1.54 1 2 .41.29.96.43 1.5.43.55 0 1.09-.14 1.5-.43.62-.46 1-1.17 1-2 0 .83.37 1.54 1 2 .41.29.96.43 1.51.43.54 0 1.08-.14 1.49-.43.62-.46 1-1.17 1-2 0 .83.37 1.54 1 2 .41.29.96.43 1.5.43.55 0 1.09-.14 1.5-.43.63-.46 1-1.17 1-2V7l-3-7H4L0 7v1c0 .83.37 1.54 1 2zm2 8.99h5v-5h4v5h5v-7c-.37-.05-.72-.22-1-.43-.63-.45-1-.73-1-1.56 0 .83-.38 1.11-1 1.56-.41.3-.95.43-1.49.44-.55 0-1.1-.14-1.51-.44-.63-.45-1-.73-1-1.56 0 .83-.38 1.11-1 1.56-.41.3-.95.43-1.5.44-.54 0-1.09-.14-1.5-.44-.63-.45-1-.73-1-1.57 0 .84-.38 1.12-1 1.57-.29.21-.63.38-1 .44v6.99z'; break; case 'table-col-delete': - title = 'Delete Column'; path = 'M6.4,9.98l1.28,-1.28v-0.256l-1.28,-1.28v2.8160000000000003zM12.8,8.448l1.28,-1.28v2.752l-1.28,-1.28v-0.192zM20.48,17.92v-17.92h-20.48v17.92h20.48zM19.2,15.36h-5.12v-1.024l-0.256,0.256l-1.024,-1.024v1.7919999999999998h-5.12v-1.7919999999999998l-1.024,1.024l-0.256,-0.256v1.024h-5.12v-14.08h5.12v2.3680000000000003l0.7040000000000001,-0.7040000000000001l0.5760000000000001,0.5760000000000001v-2.3040000000000003h5.12v2.3040000000000003l0.96,-0.96l0.32,0.32v-1.6640000000000001h5.12v14.144000000000002zM13.44,13.248l-3.136,-3.136l-3.264,3.264l-1.536,-1.536l3.264,-3.264l-3.136,-3.136l1.536,-1.536l3.136,3.136l3.2,-3.2l1.536,1.536l-3.2,3.2l3.136,3.136l-1.536,1.536z'; break; case 'table-col-after': - title = 'Insert Column After'; path = 'M14.08,12.864v-3.648h3.648v-1.7919999999999998h-3.648v-3.648h-1.7280000000000002v3.648h-3.7119999999999997v1.7919999999999998h3.7119999999999997v3.648zM0,17.92v-17.92h20.48v17.92h-20.48zM6.4,1.28h-5.12v3.84h5.12v-3.84zM6.4,6.4h-5.12v3.84h5.12v-3.84zM6.4,11.52h-5.12v3.84h5.12v-3.84zM19.2,1.28h-11.52v14.08h11.52v-14.08z'; break; case 'table-col-before': - title = 'Insert Column Before'; path = 'M6.4,3.7760000000000002v3.648h-3.648v1.7919999999999998h3.648v3.648h1.7280000000000002v-3.648h3.7119999999999997v-1.7919999999999998h-3.7119999999999997v-3.648zM0,17.92v-17.92h20.48v17.92h-20.48zM12.8,1.28h-11.52v14.08h11.52v-14.08zM19.2,1.28h-5.12v3.84h5.12v-3.84zM19.2,6.4h-5.12v3.84h5.12v-3.84zM19.2,11.52h-5.12v3.84h5.12v-3.84z'; break; case 'table-row-delete': - title = 'Delete Row'; path = 'M17.728,11.456l-3.136,-3.136l3.2,-3.2l-1.536,-1.536l-3.2,3.2l-3.136,-3.136l-1.536,1.472l3.2,3.2l-3.264,3.264l1.536,1.536l3.264,-3.264l3.136,3.136l1.472,-1.536zM0,17.92v-17.92h20.48v17.92h-20.48zM19.2,11.52h-0.44799999999999995l-1.28,-1.28h1.7280000000000002v-3.84h-1.7919999999999998l1.28,-1.28h0.512v-3.84h-17.92v3.84h6.207999999999999l1.28,1.28h-7.4879999999999995v3.84h7.4239999999999995l-1.28,1.28h-6.144v3.84h17.92v-3.84z'; break; case 'table-row-after': - title = 'Insert Row After'; path = 'M13.824000000000002,10.176h-2.88v-2.88h-1.4080000000000001v2.88h-2.88v1.344h2.88v2.88h1.4080000000000001v-2.88h2.88zM0,17.92v-17.92h20.48v17.92h-20.48zM6.4,1.28h-5.12v3.84h5.12v-3.84zM12.8,1.28h-5.12v3.84h5.12v-3.84zM19.2,1.28h-5.12v3.84h5.12v-3.84zM19.2,6.336h-17.92v9.024h17.92v-9.024z'; break; case 'table-row-before': - title = 'Insert Row Before'; path = 'M6.656000000000001,6.4639999999999995h2.88v2.88h1.4080000000000001v-2.88h2.88v-1.344h-2.88v-2.88h-1.4080000000000001v2.88h-2.88zM0,17.92v-17.92h20.48v17.92h-20.48zM7.68,15.36h5.12v-3.84h-5.12v3.84zM1.28,15.36h5.12v-3.84h-5.12v3.84zM19.2,1.28h-17.92v9.024h17.92v-9.024zM19.2,11.52h-5.12v3.84h5.12v-3.84z'; break; case 'tablet': From 2f6d3e463a0cbf86c7ef8e3377f1003af14294fa Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 26 Jun 2017 15:41:29 +1000 Subject: [PATCH 22/34] Readded block alignment toolbar --- blocks/library/table2/index.js | 2 ++ blocks/library/table2/table-block.js | 18 +++++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 6f27a52cb2f40..4829fd65364a0 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -77,6 +77,8 @@ registerBlockType( 'core/table2', { const { content } = attributes; return ( { setAttributes( { content: nextContent } ); } } diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 11adf33557f18..71f151fbecdd5 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -1,4 +1,6 @@ import Editable from '../../editable'; +import BlockControls from '../../block-controls'; +import BlockAlignmentToolbar from '../../block-alignment-toolbar'; import BlockMenu from '../../block-menu'; function execCommand( command ) { @@ -51,12 +53,22 @@ export default class TableBlock extends wp.element.Component { } render() { - const { content, focus, onFocus, onChange } = this.props; + const { attributes, setAttributes, content, focus, onFocus, onChange } = this.props; + const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); return [ + focus && ( + + + + ), focus && ( ( { @@ -77,7 +89,7 @@ export default class TableBlock extends wp.element.Component { value={ content } focus={ focus } onFocus={ onFocus } - showAlignments />, + />, ]; } } From 9d62f49a6654c93be40d170ffbc19234295a726d Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 26 Jun 2017 16:05:43 +1000 Subject: [PATCH 23/34] Used block controls rather than specialized block menu --- blocks/block-menu/index.js | 22 ---------------------- blocks/library/table2/style.scss | 5 +++++ blocks/library/table2/table-block.js | 25 +++++++++++++------------ editor/modes/visual-editor/block.js | 1 - 4 files changed, 18 insertions(+), 35 deletions(-) delete mode 100644 blocks/block-menu/index.js diff --git a/blocks/block-menu/index.js b/blocks/block-menu/index.js deleted file mode 100644 index 1af8a060f6ac1..0000000000000 --- a/blocks/block-menu/index.js +++ /dev/null @@ -1,22 +0,0 @@ -/** - * External dependencies - */ -import { Fill } from 'react-slot-fill'; - -/** - * WordPress dependencies - */ -import { ToolbarMenu } from 'components'; - -export default function BlockMenu( { icon, label, menuLabel, controls } ) { - return ( - - - - ); -} diff --git a/blocks/library/table2/style.scss b/blocks/library/table2/style.scss index 98ac635bc5416..b279461e6cae8 100644 --- a/blocks/library/table2/style.scss +++ b/blocks/library/table2/style.scss @@ -1,4 +1,9 @@ .editor-visual-editor__block[data-type="core/table2"] { + + .editor-visual-editor__block-controls > div { + display: flex; + } + table { border-collapse: collapse; width: 100%; diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 71f151fbecdd5..937c810073d2d 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -1,7 +1,7 @@ import Editable from '../../editable'; import BlockControls from '../../block-controls'; import BlockAlignmentToolbar from '../../block-alignment-toolbar'; -import BlockMenu from '../../block-menu'; +import { ToolbarMenu } from 'components'; function execCommand( command ) { return ( editor ) => { @@ -66,17 +66,6 @@ export default class TableBlock extends wp.element.Component { /> ), - focus && ( - ( { - ...control, - onClick: () => control.onClick( this.state.editor ), - } ) ) } - /> - ), , + focus && ( + + ( { + ...control, + onClick: () => control.onClick( this.state.editor ), + } ) ) } + /> + + ), ]; } } diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 56a5d81008a6b..cb51836b62115 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -298,7 +298,6 @@ class VisualEditorBlock extends Component {
-
} From 6d87fcdcb3d4a3956989cf97cf14d3d22bf67e84 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 26 Jun 2017 16:12:53 +1000 Subject: [PATCH 24/34] Fix php lint error --- lib/client-assets.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/client-assets.php b/lib/client-assets.php index 205ed65d4cce4..aed9c4510dd1b 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -103,8 +103,7 @@ function gutenberg_register_scripts_and_styles() { wp_register_script( 'wp-blocks', gutenberg_url( 'blocks/build/index.js' ), - array( 'wp-element', 'wp-components', 'wp-utils', 'tinymce-nightly', - 'tinymce-nightly-lists', 'tinymce-nightly-paste', 'tinymce-nightly-table' ), + array( 'wp-element', 'wp-components', 'wp-utils', 'tinymce-nightly', 'tinymce-nightly-lists', 'tinymce-nightly-paste', 'tinymce-nightly-table' ), filemtime( gutenberg_dir_path() . 'blocks/build/index.js' ) ); From 349444078f7160248cc80ab849c227d790db7670 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 26 Jun 2017 16:27:04 +1000 Subject: [PATCH 25/34] Updated table 2 serialization tests --- blocks/test/fixtures/core-table2.json | 101 +++++++++++++----- .../test/fixtures/core-table2.serialized.html | 5 +- 2 files changed, 76 insertions(+), 30 deletions(-) diff --git a/blocks/test/fixtures/core-table2.json b/blocks/test/fixtures/core-table2.json index af589cb3f5e47..fb877aac30beb 100644 --- a/blocks/test/fixtures/core-table2.json +++ b/blocks/test/fixtures/core-table2.json @@ -1,35 +1,47 @@ [ { "uid": "_uid_0", - "blockType": "core/table2", + "name": "core/table2", "attributes": { "content": [ + "\n ", { "type": "thead", - "children": { - "type": "tr", - "children": [ - { - "type": "th", - "children": "Version" - }, - { - "type": "th", - "children": "Musician" - }, - { - "type": "th", - "children": "Date" - } - ] - } + "children": [ + "\n ", + { + "type": "tr", + "children": [ + "\n ", + { + "type": "th", + "children": "Version" + }, + "\n ", + { + "type": "th", + "children": "Musician" + }, + "\n ", + { + "type": "th", + "children": "Date" + }, + "\n " + ] + }, + "\n " + ] }, + "\n ", { "type": "tbody", "children": [ + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": { @@ -40,19 +52,24 @@ "children": ".70" } }, + "\n ", { "type": "td", "children": "No musician chosen." }, + "\n ", { "type": "td", "children": "May 27, 2003" - } + }, + "\n " ] }, + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": { @@ -63,19 +80,24 @@ "children": "1.0" } }, + "\n ", { "type": "td", "children": "Miles Davis" }, + "\n ", { "type": "td", "children": "January 3, 2004" - } + }, + "\n " ] }, + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": [ @@ -89,19 +111,24 @@ } ] }, + "\n ", { "type": "td", "children": "…" }, + "\n ", { "type": "td", "children": "…" - } + }, + "\n " ] }, + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": { @@ -112,19 +139,24 @@ "children": "4.4" } }, + "\n ", { "type": "td", "children": "Clifford Brown" }, + "\n ", { "type": "td", "children": "December 8, 2015" - } + }, + "\n " ] }, + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": { @@ -135,19 +167,24 @@ "children": "4.5" } }, + "\n ", { "type": "td", "children": "Coleman Hawkins" }, + "\n ", { "type": "td", "children": "April 12, 2016" - } + }, + "\n " ] }, + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": { @@ -158,19 +195,24 @@ "children": "4.6" } }, + "\n ", { "type": "td", "children": "Pepper Adams" }, + "\n ", { "type": "td", "children": "August 16, 2016" - } + }, + "\n " ] }, + "\n ", { "type": "tr", "children": [ + "\n ", { "type": "td", "children": { @@ -181,18 +223,23 @@ "children": "4.7" } }, + "\n ", { "type": "td", "children": "Sarah Vaughan" }, + "\n ", { "type": "td", "children": "December 6, 2016" - } + }, + "\n " ] - } + }, + "\n " ] - } + }, + "\n" ] } } diff --git a/blocks/test/fixtures/core-table2.serialized.html b/blocks/test/fixtures/core-table2.serialized.html index 61719fd205535..6696490689288 100644 --- a/blocks/test/fixtures/core-table2.serialized.html +++ b/blocks/test/fixtures/core-table2.serialized.html @@ -1,5 +1,5 @@ -
Version
+
@@ -45,5 +45,4 @@
Version
- - + \ No newline at end of file From 27b6f014a4d3242706a5fd5dbf35de749879a831 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 26 Jun 2017 16:56:30 +1000 Subject: [PATCH 26/34] Removed some dead code and moved the alignment toolbar to the index --- blocks/library/table2/index.js | 62 +++++++--------------------- blocks/library/table2/table-block.js | 13 +----- 2 files changed, 17 insertions(+), 58 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 4829fd65364a0..f12ea2b3279b6 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -4,23 +4,11 @@ import './style.scss'; import { registerBlockType, query as hpq } from '../../api'; import TableBlock from './table-block'; +import BlockControls from '../../block-controls'; +import BlockAlignmentToolbar from '../../block-alignment-toolbar'; const { children } = hpq; -/** - * Returns an attribute setter with behavior that if the target value is - * already the assigned attribute value, it will be set to undefined. - * - * @param {string} align Alignment value - * @return {Function} Attribute setter - */ -function toggleAlignment( align ) { - return ( attributes, setAttributes ) => { - const nextAlign = attributes.align === align ? undefined : align; - setAttributes( { align: nextAlign } ); - }; -} - registerBlockType( 'core/table2', { title: wp.i18n.__( 'Table2' ), icon: 'editor-table', @@ -39,33 +27,6 @@ registerBlockType( 'core/table2', { ], }, - controls: [ - { - icon: 'align-left', - title: wp.i18n.__( 'Align left' ), - isActive: ( { align } ) => 'left' === align, - onClick: toggleAlignment( 'left' ), - }, - { - icon: 'align-center', - title: wp.i18n.__( 'Align center' ), - isActive: ( { align } ) => 'center' === align, - onClick: toggleAlignment( 'center' ), - }, - { - icon: 'align-right', - title: wp.i18n.__( 'Align right' ), - isActive: ( { align } ) => 'right' === align, - onClick: toggleAlignment( 'right' ), - }, - { - icon: 'align-full-width', - title: wp.i18n.__( 'Wide width' ), - isActive: ( { align } ) => 'wide' === align, - onClick: toggleAlignment( 'wide' ), - }, - ], - getEditWrapperProps( attributes ) { const { align } = attributes; if ( 'left' === align || 'right' === align || 'wide' === align ) { @@ -75,18 +36,27 @@ registerBlockType( 'core/table2', { edit( { attributes, setAttributes, focus, setFocus } ) { const { content } = attributes; - return ( + const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); + return [ + focus && ( + + + + ), { setAttributes( { content: nextContent } ); } } content={ content } focus={ focus } onFocus={ setFocus } - /> - ); + />, + ]; }, save( { attributes } ) { diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 937c810073d2d..3878221349858 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -1,6 +1,5 @@ import Editable from '../../editable'; import BlockControls from '../../block-controls'; -import BlockAlignmentToolbar from '../../block-alignment-toolbar'; import { ToolbarMenu } from 'components'; function execCommand( command ) { @@ -53,19 +52,9 @@ export default class TableBlock extends wp.element.Component { } render() { - const { attributes, setAttributes, content, focus, onFocus, onChange } = this.props; - const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); + const { content, focus, onFocus, onChange } = this.props; return [ - focus && ( - - - - ), Date: Tue, 27 Jun 2017 16:53:01 +1000 Subject: [PATCH 27/34] Navigate the toolbar menu with key events. --- blocks/library/table2/table-block.js | 1 + components/toolbar-menu/index.js | 100 ++++++++++++++++++++++++++- 2 files changed, 99 insertions(+), 2 deletions(-) diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 3878221349858..2401dfc3e0f27 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -72,6 +72,7 @@ export default class TableBlock extends wp.element.Component { this.state.editor.focus() } controls={ TABLE_CONTROLS.map( ( control ) => ( { ...control, diff --git a/components/toolbar-menu/index.js b/components/toolbar-menu/index.js index e0340e5330d6d..8c6bbdaa55ea8 100644 --- a/components/toolbar-menu/index.js +++ b/components/toolbar-menu/index.js @@ -2,12 +2,15 @@ * External dependencies */ import clickOutside from 'react-click-outside'; +import { findIndex } from 'lodash'; /** * WordPress dependencies */ import IconButton from 'components/icon-button'; import Dashicon from 'components/dashicon'; +import { findDOMNode } from 'element'; +import { TAB, ESCAPE, LEFT, UP, RIGHT, DOWN } from 'utils/keycodes'; /** * Internal dependencies @@ -17,13 +20,24 @@ import './style.scss'; class ToolbarMenu extends wp.element.Component { constructor() { super( ...arguments ); + this.bindMenuRef = this.bindMenuRef.bind( this ); this.closeMenu = this.closeMenu.bind( this ); this.toggleMenu = this.toggleMenu.bind( this ); + this.findActiveIndex = this.findActiveIndex.bind( this ); + this.focusIndex = this.focusIndex.bind( this ); + this.focusPrevious = this.focusPrevious.bind( this ); + this.focusNext = this.focusNext.bind( this ); + this.handleKeyDown = this.handleKeyDown.bind( this ); + this.menuRef = null; this.state = { open: false, }; } + bindMenuRef( node ) { + this.menuRef = node; + } + handleClickOutside() { if ( ! this.state.open ) { return; @@ -44,12 +58,89 @@ class ToolbarMenu extends wp.element.Component { } ); } + findActiveIndex() { + if ( this.menuRef ) { + const menu = findDOMNode( this.menuRef ); + const menuItem = document.activeElement; + if ( menuItem.parentNode === menu ) { + return findIndex( menu.children, ( child ) => child === menuItem ); + } + return -1; + } + } + + focusIndex( index ) { + if ( this.menuRef ) { + const menu = findDOMNode( this.menuRef ); + menu.children[ index ].focus(); + } + } + + focusPrevious() { + const i = this.findActiveIndex(); + const prevI = i === 0 || i === -1 ? this.props.controls.length - 1 : i - 1; + this.focusIndex( prevI ); + } + + focusNext() { + const i = this.findActiveIndex(); + const nextI = i === ( this.props.controls.length - 1 ) || i === -1 ? 0 : i + 1; + this.focusIndex( nextI ); + } + + handleKeyDown( keydown ) { + if ( this.state.open ) { + switch ( keydown.keyCode ) { + case ESCAPE: + keydown.preventDefault(); + this.closeMenu(); + if ( this.props.onSelect ) { + this.props.onSelect( null ); + } + break; + + case TAB: + keydown.preventDefault(); + if ( keydown.shiftKey ) { + this.focusPrevious(); + } else { + this.focusNext(); + } + break; + + case LEFT: + case UP: + keydown.preventDefault(); + this.focusPrevious(); + break; + + case RIGHT: + case DOWN: + keydown.preventDefault(); + this.focusNext(); + break; + + default: + break; + } + } + } + + componentDidMount() { + document.addEventListener( 'keydown', this.handleKeyDown, false ); + } + + componentWillUnmount() { + document.removeEventListener( 'keydown', this.handleKeyDown, false ); + } + render() { const { icon = 'menu', label, menuLabel, controls, + onSelect, } = this.props; if ( ! controls || ! controls.length ) { @@ -72,8 +163,8 @@ class ToolbarMenu extends wp.element.Component {
{ controls.map( ( control, index ) => ( { event.stopPropagation(); this.closeMenu(); - control.onClick(); + if ( control.onClick ) { + control.onClick(); + } + if ( onSelect ) { + onSelect( index ); + } } } className="components-toolbar-menu__menu-item" icon={ control.icon } From fc27514a630d911bff3e199d2c5446b79257fe43 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Tue, 27 Jun 2017 17:04:31 +1000 Subject: [PATCH 28/34] Renamed to TinyMCE Table --- blocks/library/table2/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index f12ea2b3279b6..1c0df01da47d2 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -10,7 +10,7 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar'; const { children } = hpq; registerBlockType( 'core/table2', { - title: wp.i18n.__( 'Table2' ), + title: wp.i18n.__( 'TinyMCE Table' ), icon: 'editor-table', category: 'formatting', From 0404c87c06c7dd9139f668d6f71d90fb8c3044d9 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 30 Jun 2017 15:18:34 +1000 Subject: [PATCH 29/34] Restyled toolbar menu and improved keyboard behaviour. --- blocks/library/table2/table-block.js | 1 - components/toolbar-menu/index.js | 38 +++++++++-- components/toolbar-menu/style.scss | 96 ++++++++++++++++++---------- 3 files changed, 93 insertions(+), 42 deletions(-) diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 2401dfc3e0f27..3878221349858 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -72,7 +72,6 @@ export default class TableBlock extends wp.element.Component { this.state.editor.focus() } controls={ TABLE_CONTROLS.map( ( control ) => ( { ...control, diff --git a/components/toolbar-menu/index.js b/components/toolbar-menu/index.js index 8c6bbdaa55ea8..615bfd6c4cf1c 100644 --- a/components/toolbar-menu/index.js +++ b/components/toolbar-menu/index.js @@ -1,6 +1,7 @@ /** * External dependencies */ +import classNames from 'classnames'; import clickOutside from 'react-click-outside'; import { findIndex } from 'lodash'; @@ -72,19 +73,24 @@ class ToolbarMenu extends wp.element.Component { focusIndex( index ) { if ( this.menuRef ) { const menu = findDOMNode( this.menuRef ); - menu.children[ index ].focus(); + if ( index < 0 ) { + menu.previousElementSibling.focus(); + } else { + menu.children[ index ].focus(); + } } } focusPrevious() { const i = this.findActiveIndex(); - const prevI = i === 0 || i === -1 ? this.props.controls.length - 1 : i - 1; + const prevI = i <= -1 ? -1 : i - 1; this.focusIndex( prevI ); } focusNext() { const i = this.findActiveIndex(); - const nextI = i === ( this.props.controls.length - 1 ) || i === -1 ? 0 : i + 1; + const maxI = this.props.controls.length - 1; + const nextI = i >= maxI ? maxI : i + 1; this.focusIndex( nextI ); } @@ -93,7 +99,11 @@ class ToolbarMenu extends wp.element.Component { switch ( keydown.keyCode ) { case ESCAPE: keydown.preventDefault(); + keydown.stopPropagation(); this.closeMenu(); + const node = findDOMNode( this ); + const toggle = node.querySelector( '.components-toolbar-menu__toggle' ); + toggle.focus(); if ( this.props.onSelect ) { this.props.onSelect( null ); } @@ -120,6 +130,16 @@ class ToolbarMenu extends wp.element.Component { this.focusNext(); break; + default: + break; + } + } else { + switch ( keydown.keyCode ) { + case DOWN: + keydown.preventDefault(); + this.toggleMenu(); + break; + default: break; } @@ -127,11 +147,13 @@ class ToolbarMenu extends wp.element.Component { } componentDidMount() { - document.addEventListener( 'keydown', this.handleKeyDown, false ); + const node = findDOMNode( this ); + node.addEventListener( 'keydown', this.handleKeyDown, false ); } componentWillUnmount() { - document.removeEventListener( 'keydown', this.handleKeyDown, false ); + const node = findDOMNode( this ); + node.removeEventListener( 'keydown', this.handleKeyDown, false ); } render() { @@ -150,7 +172,11 @@ class ToolbarMenu extends wp.element.Component { return (
svg, + &.is-active:hover > svg { + background-color: $dark-gray-500; + color: $white; + } } } @@ -30,30 +54,32 @@ border: 1px solid $light-gray-500; background: $white; padding: 3px 3px 0 3px; + font-family: $default-font; + font-size: $default-font-size; + line-height: $default-line-height; - input { - font-size: 13px; - } -} - -.components-toolbar-menu__menu-item { - width: 100%; - margin-bottom: 3px; - padding: 6px; - background: none; - border: 1px solid transparent; - outline: none; - color: $dark-gray-500; - cursor: pointer; - - &:hover, - &:focus, - &:not(:disabled):hover { + .components-toolbar-menu__menu-item { + width: 100%; + margin-bottom: 3px; + padding: 6px; + background: none; + border: 1px solid transparent; + border-radius: 0; + outline: none; color: $dark-gray-500; - border-color: $dark-gray-500; - } + cursor: pointer; - .dashicon { - margin-right: 5px; + &:hover, + &:focus, + &:not(:disabled):hover { + box-shadow: none; + color: $dark-gray-500; + border-color: $dark-gray-500; + } + + .dashicon { + margin-right: 5px; + } } } + From b9cdc9df586b71809221e7f74a16ff55229cf209 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Fri, 30 Jun 2017 16:09:02 +1000 Subject: [PATCH 30/34] Updated table2 serialization tests to match new naming scheme --- .../fixtures/{core-table2.html => core__table2.html} | 0 .../fixtures/{core-table2.json => core__table2.json} | 0 blocks/test/fixtures/core__table2.parsed.json | 11 +++++++++++ ...2.serialized.html => core__table2.serialized.html} | 0 4 files changed, 11 insertions(+) rename blocks/test/fixtures/{core-table2.html => core__table2.html} (100%) rename blocks/test/fixtures/{core-table2.json => core__table2.json} (100%) create mode 100644 blocks/test/fixtures/core__table2.parsed.json rename blocks/test/fixtures/{core-table2.serialized.html => core__table2.serialized.html} (100%) diff --git a/blocks/test/fixtures/core-table2.html b/blocks/test/fixtures/core__table2.html similarity index 100% rename from blocks/test/fixtures/core-table2.html rename to blocks/test/fixtures/core__table2.html diff --git a/blocks/test/fixtures/core-table2.json b/blocks/test/fixtures/core__table2.json similarity index 100% rename from blocks/test/fixtures/core-table2.json rename to blocks/test/fixtures/core__table2.json diff --git a/blocks/test/fixtures/core__table2.parsed.json b/blocks/test/fixtures/core__table2.parsed.json new file mode 100644 index 0000000000000..3a71111906ab8 --- /dev/null +++ b/blocks/test/fixtures/core__table2.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/table2", + "attrs": null, + "rawContent": "\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
VersionMusicianDate
.70No musician chosen.May 27, 2003
1.0Miles DavisJanuary 3, 2004
Lots of versions skipped, see the full list……
4.4Clifford BrownDecember 8, 2015
4.5Coleman HawkinsApril 12, 2016
4.6Pepper AdamsAugust 16, 2016
4.7Sarah VaughanDecember 6, 2016
\n" + }, + { + "attrs": {}, + "rawContent": "\n\n" + } +] diff --git a/blocks/test/fixtures/core-table2.serialized.html b/blocks/test/fixtures/core__table2.serialized.html similarity index 100% rename from blocks/test/fixtures/core-table2.serialized.html rename to blocks/test/fixtures/core__table2.serialized.html From 0cb4cf5c13deb8222c0829fb93107d723cee420b Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 3 Jul 2017 14:06:53 +1000 Subject: [PATCH 31/34] Added className prop to table --- blocks/library/table2/index.js | 3 ++- blocks/library/table2/table-block.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/blocks/library/table2/index.js b/blocks/library/table2/index.js index 1c0df01da47d2..7ac3a8cdb3a5f 100644 --- a/blocks/library/table2/index.js +++ b/blocks/library/table2/index.js @@ -34,7 +34,7 @@ registerBlockType( 'core/table2', { } }, - edit( { attributes, setAttributes, focus, setFocus } ) { + edit( { attributes, setAttributes, focus, setFocus, className } ) { const { content } = attributes; const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } ); return [ @@ -55,6 +55,7 @@ registerBlockType( 'core/table2', { content={ content } focus={ focus } onFocus={ setFocus } + className={ className } />, ]; }, diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 3878221349858..999e03d7ad849 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -52,12 +52,13 @@ export default class TableBlock extends wp.element.Component { } render() { - const { content, focus, onFocus, onChange } = this.props; + const { content, focus, onFocus, onChange, className } = this.props; return [ ( { ...settings, plugins: ( settings.plugins || [] ).concat( 'table' ), From dc0dfcf790e13983cda1ee1ad26570628371d2d1 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 3 Jul 2017 15:06:24 +1000 Subject: [PATCH 32/34] Moved table styling into .wp-block-table-2 class --- blocks/library/table2/style.scss | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/blocks/library/table2/style.scss b/blocks/library/table2/style.scss index b279461e6cae8..70ad43999e233 100644 --- a/blocks/library/table2/style.scss +++ b/blocks/library/table2/style.scss @@ -4,20 +4,6 @@ display: flex; } - table { - border-collapse: collapse; - width: 100%; - } - - td, th { - padding: 0.5em; - border: 1px solid currentColor; - } - - td[data-mce-selected="1"], th[data-mce-selected="1"] { - background-color: $light-gray-500; - } - &[data-align="left"], &[data-align="right"] { min-width: 33%; @@ -33,4 +19,20 @@ float: right; margin-left: $block-padding; } -} \ No newline at end of file +} + +.wp-block-table-2 { + table { + border-collapse: collapse; + width: 100%; + } + + td, th { + padding: 0.5em; + border: 1px solid currentColor; + } + + td[data-mce-selected="1"], th[data-mce-selected="1"] { + background-color: $light-gray-500; + } +} From 9daaef9ac3b76f1fb09225c48e61e8afa43ee78d Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 3 Jul 2017 15:54:21 +1000 Subject: [PATCH 33/34] Change ToolbarMenu so it can be a subcomponent of a toolbar. --- blocks/library/table2/table-block.js | 22 +++++++++++++--------- components/toolbar-menu/style.scss | 6 +----- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 999e03d7ad849..9e420ef7b47ba 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -1,6 +1,6 @@ import Editable from '../../editable'; import BlockControls from '../../block-controls'; -import { ToolbarMenu } from 'components'; +import { Toolbar, ToolbarMenu } from 'components'; function execCommand( command ) { return ( editor ) => { @@ -71,14 +71,18 @@ export default class TableBlock extends wp.element.Component { />, focus && ( - ( { - ...control, - onClick: () => control.onClick( this.state.editor ), - } ) ) } - /> + +
  • + ( { + ...control, + onClick: () => control.onClick( this.state.editor ), + } ) ) } + /> +
    • +     ), ]; diff --git a/components/toolbar-menu/style.scss b/components/toolbar-menu/style.scss index 4accf817c243d..e39290eaf4b59 100644 --- a/components/toolbar-menu/style.scss +++ b/components/toolbar-menu/style.scss @@ -1,9 +1,5 @@ .components-toolbar-menu { - border: 1px solid $light-gray-500; - box-shadow: $shadow-popover; - background-color: $white; padding: 3px; - margin-right: 10px; position: relative; display: flex; @@ -49,7 +45,7 @@ .components-toolbar-menu__menu { position: absolute; top: $block-controls-height - 1px; - left: 0px; + left: -1px; box-shadow: $shadow-popover; border: 1px solid $light-gray-500; background: $white; From c133e8e120d170da473e05c4d37f3aebe29f16d9 Mon Sep 17 00:00:00 2001 From: James Johnson Date: Mon, 3 Jul 2017 16:03:41 +1000 Subject: [PATCH 34/34] Renamed ToolbarMenu to DropdownMenu --- blocks/library/table2/table-block.js | 4 ++-- .../{toolbar-menu => dropdown-menu}/index.js | 14 +++++++------- .../{toolbar-menu => dropdown-menu}/style.scss | 8 ++++---- components/index.js | 2 +- 4 files changed, 14 insertions(+), 14 deletions(-) rename components/{toolbar-menu => dropdown-menu}/index.js (91%) rename components/{toolbar-menu => dropdown-menu}/style.scss (90%) diff --git a/blocks/library/table2/table-block.js b/blocks/library/table2/table-block.js index 9e420ef7b47ba..567aac26b79df 100644 --- a/blocks/library/table2/table-block.js +++ b/blocks/library/table2/table-block.js @@ -1,6 +1,6 @@ import Editable from '../../editable'; import BlockControls from '../../block-controls'; -import { Toolbar, ToolbarMenu } from 'components'; +import { Toolbar, DropdownMenu } from 'components'; function execCommand( command ) { return ( editor ) => { @@ -73,7 +73,7 @@ export default class TableBlock extends wp.element.Component {
  • - ( { diff --git a/components/toolbar-menu/index.js b/components/dropdown-menu/index.js similarity index 91% rename from components/toolbar-menu/index.js rename to components/dropdown-menu/index.js index 615bfd6c4cf1c..5d017fa8e172f 100644 --- a/components/toolbar-menu/index.js +++ b/components/dropdown-menu/index.js @@ -18,7 +18,7 @@ import { TAB, ESCAPE, LEFT, UP, RIGHT, DOWN } from 'utils/keycodes'; */ import './style.scss'; -class ToolbarMenu extends wp.element.Component { +class DropdownMenu extends wp.element.Component { constructor() { super( ...arguments ); this.bindMenuRef = this.bindMenuRef.bind( this ); @@ -102,7 +102,7 @@ class ToolbarMenu extends wp.element.Component { keydown.stopPropagation(); this.closeMenu(); const node = findDOMNode( this ); - const toggle = node.querySelector( '.components-toolbar-menu__toggle' ); + const toggle = node.querySelector( '.components-dropdown-menu__toggle' ); toggle.focus(); if ( this.props.onSelect ) { this.props.onSelect( null ); @@ -170,10 +170,10 @@ class ToolbarMenu extends wp.element.Component { } return ( -
    +
    { this.state.open &&
    @@ -219,4 +219,4 @@ class ToolbarMenu extends wp.element.Component { } } -export default clickOutside( ToolbarMenu ); +export default clickOutside( DropdownMenu ); diff --git a/components/toolbar-menu/style.scss b/components/dropdown-menu/style.scss similarity index 90% rename from components/toolbar-menu/style.scss rename to components/dropdown-menu/style.scss index e39290eaf4b59..398c200370695 100644 --- a/components/toolbar-menu/style.scss +++ b/components/dropdown-menu/style.scss @@ -1,9 +1,9 @@ -.components-toolbar-menu { +.components-dropdown-menu { padding: 3px; position: relative; display: flex; - .components-toolbar-menu__toggle { + .components-dropdown-menu__toggle { width: auto; margin: 0px; padding: 4px; @@ -42,7 +42,7 @@ } } -.components-toolbar-menu__menu { +.components-dropdown-menu__menu { position: absolute; top: $block-controls-height - 1px; left: -1px; @@ -54,7 +54,7 @@ font-size: $default-font-size; line-height: $default-line-height; - .components-toolbar-menu__menu-item { + .components-dropdown-menu__menu-item { width: 100%; margin-bottom: 3px; padding: 6px; diff --git a/components/index.js b/components/index.js index 82a36311bcddc..6e7e951a400c2 100644 --- a/components/index.js +++ b/components/index.js @@ -15,7 +15,7 @@ export { default as ResponsiveWrapper } from './responsive-wrapper'; export { default as SandBox } from './sandbox'; export { default as Spinner } from './spinner'; export { default as Toolbar } from './toolbar'; -export { default as ToolbarMenu } from './toolbar-menu'; +export { default as DropdownMenu } from './dropdown-menu'; export { default as Popover } from './popover'; // Higher-Order Components