Skip to content

Commit

Permalink
Add table block header and footer toggles (#15409)
Browse files Browse the repository at this point in the history
* Add basic toggle controls for table header and footer

* Add basic styling for table header and footer section

* Update copy

* Add appropriate cell dependent on section

* Add tests

* Update readme?!

* Ok?!?!?!?

* Remove thead/tfoot border

* Add an additional test

* Make striping style of table block only apply to tbody

* Make th element have transparent borders when using striped table block

* Add e2e tests for existing table block functionality

* Add a test for table header and footer functionality
  • Loading branch information
talldan authored May 9, 2019
1 parent f628a8a commit 48c67fb
Show file tree
Hide file tree
Showing 6 changed files with 435 additions and 9 deletions.
23 changes: 23 additions & 0 deletions packages/block-library/src/table/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
deleteRow,
insertColumn,
deleteColumn,
toggleSection,
} from './state';

const BACKGROUND_COLORS = [
Expand Down Expand Up @@ -80,6 +81,8 @@ export class TableEdit extends Component {
this.onInsertColumnBefore = this.onInsertColumnBefore.bind( this );
this.onInsertColumnAfter = this.onInsertColumnAfter.bind( this );
this.onDeleteColumn = this.onDeleteColumn.bind( this );
this.onToggleHeaderSection = this.onToggleHeaderSection.bind( this );
this.onToggleFooterSection = this.onToggleFooterSection.bind( this );

this.state = {
initialRowCount: 2,
Expand Down Expand Up @@ -195,6 +198,16 @@ export class TableEdit extends Component {
this.onInsertRow( 1 );
}

onToggleHeaderSection() {
const { attributes, setAttributes } = this.props;
setAttributes( toggleSection( attributes, 'head' ) );
}

onToggleFooterSection() {
const { attributes, setAttributes } = this.props;
setAttributes( toggleSection( attributes, 'foot' ) );
}

/**
* Deletes the currently selected row.
*/
Expand Down Expand Up @@ -448,6 +461,16 @@ export class TableEdit extends Component {
checked={ !! hasFixedLayout }
onChange={ this.onChangeFixedLayout }
/>
<ToggleControl
label={ __( 'Header section' ) }
checked={ !! ( head && head.length ) }
onChange={ this.onToggleHeaderSection }
/>
<ToggleControl
label={ __( 'Footer section' ) }
checked={ !! ( foot && foot.length ) }
onChange={ this.onToggleFooterSection }
/>
</PanelBody>
<PanelColorSettings
title={ __( 'Color Settings' ) }
Expand Down
30 changes: 26 additions & 4 deletions packages/block-library/src/table/state.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { times } from 'lodash';
import { times, get } from 'lodash';

/**
* Creates a table state.
Expand Down Expand Up @@ -76,16 +76,17 @@ export function updateCellContent( state, {
export function insertRow( state, {
section,
rowIndex,
columnCount,
} ) {
const cellCount = state[ section ][ 0 ].cells.length;
const cellCount = columnCount || state[ section ][ 0 ].cells.length;

return {
[ section ]: [
...state[ section ].slice( 0, rowIndex ),
{
cells: times( cellCount, () => ( {
content: '',
tag: 'td',
tag: section === 'head' ? 'th' : 'td',
} ) ),
},
...state[ section ].slice( rowIndex ),
Expand Down Expand Up @@ -130,7 +131,7 @@ export function insertColumn( state, {
...row.cells.slice( 0, columnIndex ),
{
content: '',
tag: 'td',
tag: section === 'head' ? 'th' : 'td',
},
...row.cells.slice( columnIndex ),
],
Expand All @@ -157,3 +158,24 @@ export function deleteColumn( state, {
} ) ).filter( ( row ) => row.cells.length ),
};
}

/**
* Toggles the existance of a section.
*
* @param {Object} state Current table state.
* @param {string} section Name of the section to toggle.
*
* @return {Object} New table state.
*/
export function toggleSection( state, section ) {
// Section exists, replace it with an empty row to remove it.
if ( state[ section ] && state[ section ].length ) {
return { [ section ]: [] };
}

// Get the length of the first row of the body to use when creating the header.
const columnCount = get( state, [ 'body', 0, 'cells', 'length' ], 1 );

// Section doesn't exist, insert an empty row to create the section.
return insertRow( state, { section, rowIndex: 0, columnCount } );
}
11 changes: 6 additions & 5 deletions packages/block-library/src/table/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,35 @@
border-collapse: inherit;
background-color: transparent;

tr:nth-child(odd) {
tbody tr:nth-child(odd) {
background-color: $light-gray-200;
}

&.has-subtle-light-gray-background-color {
tr:nth-child(odd) {
tbody tr:nth-child(odd) {
background-color: $subtle-light-gray;
}
}

&.has-subtle-pale-green-background-color {
tr:nth-child(odd) {
tbody tr:nth-child(odd) {
background-color: $subtle-pale-green;
}
}

&.has-subtle-pale-blue-background-color {
tr:nth-child(odd) {
tbody tr:nth-child(odd) {
background-color: $subtle-pale-blue;
}
}

&.has-subtle-pale-pink-background-color {
tr:nth-child(odd) {
tbody tr:nth-child(odd) {
background-color: $subtle-pale-pink;
}
}

th,
td {
border-color: transparent;
}
Expand Down
Loading

0 comments on commit 48c67fb

Please sign in to comment.