Initial attempt at table block caption

WordPress · May 9, 2019 · 42623d6 · 42623d6
1 parent 48c67fb
commit 42623d6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
@@ -9,6 +9,11 @@
 		"backgroundColor": {
 			"type": "string"
 		},
+		"caption": {
+			"type": "string",
+			"source": "html",
+			"selector": "caption"
+		},
 		"head": {
 			"type": "array",
 			"default": [],

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -410,9 +410,11 @@ export class TableEdit extends Component {
 			className,
 			backgroundColor,
 			setBackgroundColor,
+			setAttributes,
+			isSelected,
 		} = this.props;
 		const { initialRowCount, initialColumnCount } = this.state;
-		const { hasFixedLayout, head, body, foot } = attributes;
+		const { hasFixedLayout, caption, head, body, foot } = attributes;
 		const isEmpty = ! head.length && ! body.length && ! foot.length;
 		const Section = this.renderSection;
 
@@ -487,10 +489,20 @@ export class TableEdit extends Component {
 					/>
 				</InspectorControls>
 				<table className={ classes }>
+					<caption>{ caption }</caption>
 					<Section type="head" rows={ head } />
 					<Section type="body" rows={ body } />
 					<Section type="foot" rows={ foot } />
 				</table>
+				<RichText
+					className={ classnames( 'wp-block-table__caption-content', {
+						'is-visible': isSelected || caption,
+					} ) }
+					tagName="p"
+					placeholder={ __( 'Write caption…' ) }
+					value={ caption }
+					onChange={ ( value ) => setAttributes( { caption: value } ) }
+				/>
 			</>
 		);
 	}

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -40,4 +40,22 @@
 	&__cell-content {
 		padding: 0.5em;
 	}
+
+	caption {
+		visibility: hidden;
+		height: 0;
+	}
+
+	&__caption-content {
+		@include caption-style-theme();
+		overflow: hidden;
+		height: 0;
+		margin: 0.5em 0 0;
+
+		&.is-visible {
+			overflow: auto;
+			height: auto;
+			margin: 0.5em 0 0;
+		}
+	}
 }
diff --git a/packages/block-library/src/table/save.js b/packages/block-library/src/table/save.js
@@ -15,6 +15,7 @@ export default function save( { attributes } ) {
 		body,
 		foot,
 		backgroundColor,
+		caption,
 	} = attributes;
 	const isEmpty = ! head.length && ! body.length && ! foot.length;
 
@@ -55,6 +56,7 @@ export default function save( { attributes } ) {
 
 	return (
 		<table className={ classes }>
+			{ !! caption && <RichText.Content tagName="caption" value={ caption } /> }
 			<Section type="head" rows={ head } />
 			<Section type="body" rows={ body } />
 			<Section type="foot" rows={ foot } />

diff --git a/packages/block-library/src/table/theme.scss b/packages/block-library/src/table/theme.scss
@@ -9,4 +9,9 @@
 		border: 1px solid;
 		word-break: break-all;
 	}
+
+	caption {
+		caption-side: bottom;
+		@include caption-style-theme();
+	}
 }