New Block: Description List

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 ) => {

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 } ) }
+		/>
+	);
+}

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: '',
+		},
+	},
+};

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 } />;
+}

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 }
+		/>
+	);
+}

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;
+	}
+}

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,
+};

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>
+	);
+}

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 } ) }
+		/>
+	);
+}

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: '',
+		},
+	},
+};

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 } />;
+}

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";

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,