From a6df07d5b17dd74c07d8f699684162335b03e667 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Tue, 10 Mar 2020 12:25:16 +0100
Subject: [PATCH] New Block: Description List

---
 .../components/block-list/block-wrapper.js    |  3 ++
 .../src/description-details/edit.js           | 17 ++++++++++
 .../src/description-details/index.js          | 33 +++++++++++++++++++
 .../src/description-details/save.js           |  8 +++++
 .../src/description-list/edit.js              | 23 +++++++++++++
 .../src/description-list/editor.scss          | 13 ++++++++
 .../src/description-list/index.js             | 25 ++++++++++++++
 .../src/description-list/save.js              | 12 +++++++
 .../src/description-term/edit.js              | 17 ++++++++++
 .../src/description-term/index.js             | 33 +++++++++++++++++++
 .../src/description-term/save.js              |  8 +++++
 packages/block-library/src/editor.scss        |  1 +
 packages/block-library/src/index.js           |  6 ++++
 13 files changed, 199 insertions(+)
 create mode 100644 packages/block-library/src/description-details/edit.js
 create mode 100644 packages/block-library/src/description-details/index.js
 create mode 100644 packages/block-library/src/description-details/save.js
 create mode 100644 packages/block-library/src/description-list/edit.js
 create mode 100644 packages/block-library/src/description-list/editor.scss
 create mode 100644 packages/block-library/src/description-list/index.js
 create mode 100644 packages/block-library/src/description-list/save.js
 create mode 100644 packages/block-library/src/description-term/edit.js
 create mode 100644 packages/block-library/src/description-term/index.js
 create mode 100644 packages/block-library/src/description-term/save.js

diff --git a/packages/block-editor/src/components/block-list/block-wrapper.js b/packages/block-editor/src/components/block-list/block-wrapper.js
index 964bef9008420..18da09de388ed 100644
--- a/packages/block-editor/src/components/block-list/block-wrapper.js
+++ b/packages/block-editor/src/components/block-list/block-wrapper.js
@@ -231,6 +231,9 @@ const elements = [
 	'ol',
 	'ul',
 	'figure',
+	'dl',
+	'dt',
+	'dd',
 ];
 
 const ExtendedBlockComponent = elements.reduce( ( acc, element ) => {
diff --git a/packages/block-library/src/description-details/edit.js b/packages/block-library/src/description-details/edit.js
new file mode 100644
index 0000000000000..bb8b9886c1725
--- /dev/null
+++ b/packages/block-library/src/description-details/edit.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
+
+export default function Edit( { attributes, setAttributes } ) {
+	return (
+		<RichText
+			tagName={ Block.dd }
+			value={ attributes.content }
+			onChange={ ( content ) => setAttributes( { content } ) }
+		/>
+	);
+}
diff --git a/packages/block-library/src/description-details/index.js b/packages/block-library/src/description-details/index.js
new file mode 100644
index 0000000000000..e39881409b2fb
--- /dev/null
+++ b/packages/block-library/src/description-details/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+
+export const name = 'core/description-details';
+
+export const settings = {
+	title: __( 'Description Details' ),
+	parent: [ 'core/description-details' ],
+	description: __( 'The details of a term.' ),
+	category: 'layout',
+	supports: {
+		className: false,
+		lightBlockWrapper: true,
+	},
+	edit,
+	save,
+	attributes: {
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'dd',
+			default: '',
+		},
+	},
+};
diff --git a/packages/block-library/src/description-details/save.js b/packages/block-library/src/description-details/save.js
new file mode 100644
index 0000000000000..de41d781df9aa
--- /dev/null
+++ b/packages/block-library/src/description-details/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function Save( { attributes } ) {
+	return <RichText.Content tagName="dd" value={ attributes.content } />;
+}
diff --git a/packages/block-library/src/description-list/edit.js b/packages/block-library/src/description-list/edit.js
new file mode 100644
index 0000000000000..7e42efa3b7370
--- /dev/null
+++ b/packages/block-library/src/description-list/edit.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
+
+const ALLOWED_BLOCKS = [ 'core/description-term', 'core/description-details' ];
+const TEMPLATE = [
+	[ 'core/description-term' ],
+	[ 'core/description-details' ],
+];
+
+export default function Edit() {
+	return (
+		<InnerBlocks
+			allowedBlocks={ ALLOWED_BLOCKS }
+			template={ TEMPLATE }
+			__experimentalTagName={ Block.dl }
+		/>
+	);
+}
diff --git a/packages/block-library/src/description-list/editor.scss b/packages/block-library/src/description-list/editor.scss
new file mode 100644
index 0000000000000..f2a1ad7ebec0a
--- /dev/null
+++ b/packages/block-library/src/description-list/editor.scss
@@ -0,0 +1,13 @@
+// Undo default editor styles.
+.editor-styles-wrapper .block-editor-block-list__block {
+	&[data-type="core/description-list"],
+	&[data-type="core/description-term"],
+	&[data-type="core/description-details"] {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
+	&[data-type="core/description-details"] {
+		margin-inline-start: 40px;
+	}
+}
diff --git a/packages/block-library/src/description-list/index.js b/packages/block-library/src/description-list/index.js
new file mode 100644
index 0000000000000..00138486301ad
--- /dev/null
+++ b/packages/block-library/src/description-list/index.js
@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+
+export const name = 'core/description-list';
+
+export const settings = {
+	title: __( 'Description List' ),
+	description: __( 'List groups of terms and descriptions.' ),
+	keywords: [ __( 'list' ), __( 'definitions' ), __( 'terms' ) ],
+	category: 'layout',
+	supports: {
+		className: false,
+		lightBlockWrapper: true,
+	},
+	edit,
+	save,
+};
diff --git a/packages/block-library/src/description-list/save.js b/packages/block-library/src/description-list/save.js
new file mode 100644
index 0000000000000..ade16a707b367
--- /dev/null
+++ b/packages/block-library/src/description-list/save.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function Save() {
+	return (
+		<dl>
+			<InnerBlocks.Content />
+		</dl>
+	);
+}
diff --git a/packages/block-library/src/description-term/edit.js b/packages/block-library/src/description-term/edit.js
new file mode 100644
index 0000000000000..7c0b83799dc87
--- /dev/null
+++ b/packages/block-library/src/description-term/edit.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	__experimentalBlock as Block,
+} from '@wordpress/block-editor';
+
+export default function Edit( { attributes, setAttributes } ) {
+	return (
+		<RichText
+			tagName={ Block.dt }
+			value={ attributes.content }
+			onChange={ ( content ) => setAttributes( { content } ) }
+		/>
+	);
+}
diff --git a/packages/block-library/src/description-term/index.js b/packages/block-library/src/description-term/index.js
new file mode 100644
index 0000000000000..bf73eefce3519
--- /dev/null
+++ b/packages/block-library/src/description-term/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+
+export const name = 'core/description-term';
+
+export const settings = {
+	title: __( 'Description Term' ),
+	parent: [ 'core/description-list' ],
+	description: __( 'A term in a description list.' ),
+	category: 'layout',
+	supports: {
+		className: false,
+		lightBlockWrapper: true,
+	},
+	edit,
+	save,
+	attributes: {
+		content: {
+			type: 'string',
+			source: 'html',
+			selector: 'dt',
+			default: '',
+		},
+	},
+};
diff --git a/packages/block-library/src/description-term/save.js b/packages/block-library/src/description-term/save.js
new file mode 100644
index 0000000000000..1a3bfb95e3168
--- /dev/null
+++ b/packages/block-library/src/description-term/save.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText } from '@wordpress/block-editor';
+
+export default function Save( { attributes } ) {
+	return <RichText.Content tagName="dt" value={ attributes.content } />;
+}
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
index 6dc247b6d744a..4039131cba5f6 100644
--- a/packages/block-library/src/editor.scss
+++ b/packages/block-library/src/editor.scss
@@ -12,6 +12,7 @@
 @import "./code/editor.scss";
 @import "./columns/editor.scss";
 @import "./cover/editor.scss";
+@import "./description-list/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./classic/editor.scss";
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 0761b2b11292f..e6318fdfaa6c9 100644
--- a/packages/block-library/src/index.js
+++ b/packages/block-library/src/index.js
@@ -30,6 +30,9 @@ import * as code from './code';
 import * as columns from './columns';
 import * as column from './column';
 import * as cover from './cover';
+import * as descriptionList from './description-list';
+import * as descriptionTerm from './description-term';
+import * as descriptionDetails from './description-details';
 import * as embed from './embed';
 import * as file from './file';
 import * as html from './html';
@@ -125,6 +128,9 @@ export const registerCoreBlocks = () => {
 		columns,
 		column,
 		cover,
+		descriptionList,
+		descriptionTerm,
+		descriptionDetails,
 		embed,
 		...embed.common,
 		...embed.others,