Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Polish the Table block #6314

Merged
merged 4 commits into from
May 16, 2018
Merged

Polish the Table block #6314

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
015727f
Polish the Table block
Apr 20, 2018
7de00d8
Core blocks: Fix fixture tests
gziolo May 2, 2018
5c15b79
Address feedback.
May 16, 2018
1efc13a
Fix table block after rebase
youknowriad May 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 21 additions & 2 deletions core-blocks/table/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,30 @@
.wp-block-table {
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;
td[data-mce-selected="1"],
th[data-mce-selected="1"] {
background-color: $light-gray-300;
}
}

// Style the resize handles
.ephox-snooker-resizer-rows {
Copy link
Member

Choose a reason for hiding this comment

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

Should these styles be applied only within the context of the table block? As implemented, these will impact any table on the screen, regardless of within the block. Even if they're desirable globally, I don't think the styles should be implemented here (since a block's styles shouldn't be impacting the page as a whole).

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I wish I could scope these to be table block specific only. However these elements are inserted into the root of the DOM.

I can move them to the main stylesheet if you like?

cursor: row-resize;
}

.ephox-snooker-resizer-cols {
cursor: col-resize;
}

.ephox-snooker-resizer-bar-dragging {
background: $blue-medium-500;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Missing an empty line here :)

54 changes: 47 additions & 7 deletions core-blocks/table/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,24 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { Fragment } from '@wordpress/element';
import { getPhrasingContentSchema } from '@wordpress/blocks';
import {
getPhrasingContentSchema,
BlockControls,
BlockAlignmentToolbar,
RichText,
} from '@wordpress/editor';
InspectorControls,
} from '@wordpress/blocks';

import {
PanelBody,
ToggleControl,
} from '@wordpress/components';

/**
* Internal dependencies
Expand Down Expand Up @@ -73,6 +80,10 @@ export const settings = {
align: {
type: 'string',
},
hasFixedLayout: {
type: 'boolean',
default: false,
},
},

transforms: {
Expand All @@ -93,8 +104,19 @@ export const settings = {
},

edit( { attributes, setAttributes, isSelected, className } ) {
const { content } = attributes;
const { content, hasFixedLayout } = attributes;
const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
const toggleFixedLayout = () => {
setAttributes( { hasFixedLayout: ! hasFixedLayout } );
};

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

return (
<Fragment>
<BlockControls>
Expand All @@ -103,22 +125,40 @@ export const settings = {
onChange={ updateAlignment }
/>
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'Table Settings' ) } className="blocks-table-settings">
<ToggleControl
label={ __( 'Fixed width table cells' ) }
checked={ !! hasFixedLayout }
onChange={ toggleFixedLayout }
/>
</PanelBody>
</InspectorControls>
<TableBlock
onChange={ ( nextContent ) => {
setAttributes( { content: nextContent } );
} }
content={ content }
className={ className }
className={ classes }
isSelected={ isSelected }
/>
</Fragment>
);
},

save( { attributes } ) {
const { content, align } = attributes;
save( { attributes, className } ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

There's no className prop passed to the save callback we should just remove it, it will be added automatically.

const { content, align, hasFixedLayout } = attributes;

const classes = classnames(
className,
{
'has-fixed-layout': hasFixedLayout,
[ `align${ align }` ]: align,
},
);

return (
<RichText.Content tagName="table" className={ align ? `align${ align }` : null } value={ content } />
<RichText.Content tagName="table" className={ classes } value={ content } />
);
},
};
18 changes: 16 additions & 2 deletions core-blocks/table/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
.wp-block-table {
overflow-x: auto;
display: block;
border-collapse: collapse;
width: 100%;

table {
border-collapse: collapse;
tbody {
width: 100%;
display: table;
min-width: $break-mobile / 2;
}

td,
th {
padding: 0.5em;
border: 1px solid currentColor;
}

// Fixed layout toggle
&.has-fixed-layout tbody {
table-layout: fixed;
}
}
3 changes: 2 additions & 1 deletion core-blocks/test/fixtures/core__table.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,8 @@
}
]
}
]
],
"hasFixedLayout": false
},
"innerBlocks": [],
"originalContent": "<table class=\"wp-block-table\"><thead><tr><th>Version</th><th>Musician</th><th>Date</th></tr></thead><tbody><tr><td><a href=\"https://wordpress.org/news/2003/05/wordpress-now-available/\">.70</a></td><td>No musician chosen.</td><td>May 27, 2003</td></tr><tr><td><a href=\"https://wordpress.org/news/2004/01/wordpress-10/\">1.0</a></td><td>Miles Davis</td><td>January 3, 2004</td></tr><tr><td>Lots of versions skipped, see <a href=\"https://codex.wordpress.org/WordPress_Versions\">the full list</a></td><td>&hellip;</td><td>&hellip;</td></tr><tr><td><a href=\"https://wordpress.org/news/2015/12/clifford/\">4.4</a></td><td>Clifford Brown</td><td>December 8, 2015</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/04/coleman/\">4.5</a></td><td>Coleman Hawkins</td><td>April 12, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/08/pepper/\">4.6</a></td><td>Pepper Adams</td><td>August 16, 2016</td></tr><tr><td><a href=\"https://wordpress.org/news/2016/12/vaughan/\">4.7</a></td><td>Sarah Vaughan</td><td>December 6, 2016</td></tr></tbody></table>"
Expand Down