Add definition list support.

assets/js/src/definition-description.jsx

@@ -0,0 +1,37 @@
+const { registerBlockType } = wp.blocks;
+const { RichText } = wp.editor;
+
+/* global YomiganaDd: false */
+
+registerBlockType( 'wp-yomigana/description', {
+
+  title: YomiganaDd.label,
+
+  icon: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><path d="M28.71,33.65V21.49H71.27V38.21h-3ZM71.27,208.44v16.72H28.71V213l39.52-4.56ZM57.59,115.73c0-31.31,0-62.93-.91-94.24H85.86C85,52.19,85,83.81,85,115.73v11.55c0,35,0,66.57.91,97.88H56.68c.91-30.7.91-62.32.91-97.88Zm13.68,95.45h39.21c47.73,0,73.87-32.23,73.87-87.55,0-57.45-26.14-88.16-71.13-88.16H71.27v-14h47.12c57.76,0,97.88,35.87,97.88,102.14,0,65.66-45,101.53-104,101.53h-41Z"/></svg>
+  ),
+
+  category: 'common',
+
+  parent: [ 'wp-yomigana/dl' ],
+
+  attributes: {
+    content: {
+      source: 'html',
+      selector: 'dd'
+    }
+  },
+
+  edit({attributes, setAttributes, className}){
+    return (
+      <RichText className={className} tagName='div' value={attributes.content} onChange={(content)=>setAttributes({content})}/>
+    );
+  },
+
+  save({attributes}){
+    return (
+      <RichText.Content tagName='dd' value={attributes.content} />
+    )
+  }
+
+} );

assets/js/src/definition-list.jsx

@@ -0,0 +1,41 @@
+const { registerBlockType } = wp.blocks;
+const { InnerBlocks } = wp.editor;
+
+/* global YomiganaDl: false */
+
+registerBlockType( 'wp-yomigana/dl', {
+
+  title: YomiganaDl.label,
+
+  icon: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+      <rect x="20" y="21.5" width="100" height="30"/>
+      <rect x="20" y="60" width="200" height="20"/>
+      <rect x="20" y="91.5" width="100" height="30"/>
+      <rect x="20" y="130" width="200" height="20"/>
+      <rect x="20" y="161.5" width="100" height="30"/>
+      <rect x="20" y="200" width="200" height="20"/>
+    </svg>
+  ),
+
+  category: 'common',
+
+  keywords: [],
+
+  edit({attributes, className}){
+    const allowedBlocks = [ 'wp-yomigana/term' ];
+    return (
+      <div className={className}>
+        <InnerBlocks allowedBlocks={allowedBlocks} templateLock={false} />
+      </div>
+    )
+  },
+
+  save({className}){
+    return (
+      <dl className={className}>
+        <InnerBlocks.Content />
+      </dl>
+    )
+  }
+} );

assets/js/src/definition-term.jsx

@@ -0,0 +1,37 @@
+const { registerBlockType } = wp.blocks;
+const { RichText } = wp.editor;
+
+/* global YomiganaDt: false */
+
+registerBlockType( 'wp-yomigana/term', {
+
+  title: YomiganaDt.label,
+
+  icon: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><title>block-icons</title><path d="M49.46,38.07,62.65,23.41,53.27,75.59H36.85L39.2,23.41h160l2.35,52.18H185.17l-9.38-52.18L189,38.07Zm72.69,165.61,41,4.4v11.73H75.25V208.08l41-4.4ZM106,114.28c0-30.19,0-60.67-.88-90.87h28.14c-.88,29.61-.88,60.09-.88,90.87v14.66c0,30.19,0,60.67.88,90.87H105.15c.88-29.61.88-60.09.88-90.87Z"/></svg>
+  ),
+
+  category: 'common',
+
+  parent: [ 'wp-yomigana/dl' ],
+
+  attributes: {
+    content: {
+      source: 'html',
+      selector: 'dt'
+    }
+  },
+
+  edit({attributes, setAttributes, className}){
+    return (
+      <RichText className={className} tagName='div' value={attributes.content} onChange={(content)=>setAttributes({content})}/>
+    );
+  },
+
+  save({attributes}){
+    return (
+      <RichText.Content tagName='dt' value={attributes.content} />
+    )
+  }
+
+} );

assets/scss/editor-dl.scss

@@ -0,0 +1,15 @@
+.wp-block-wp-yomigana{
+
+  &-dl{
+
+  }
+
+  &-term{
+    font-weight: bold;
+  }
+
+  &-description{
+    margin-left: 1em;
+  }
+
+}

src/Hametuha/Yomigana/Bootstrap.php

@@ -17,6 +17,7 @@ class Bootstrap extends Application {
 	 */
 	protected function __construct() {
 		Admin::get_instance();
+		Gutenberg::get_instance();
 		// Add TinyMCE plugins.
 		add_filter( 'mce_external_plugins', [ $this, 'register_plugins' ] );
 		// Register buttons.

src/Hametuha/Yomigana/Gutenberg.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace Hametuha\Yomigana;
+
+
+use Hametuha\Yomigana\Pattern\Application;
+
+/**
+ * Gutenberg helper
+ *
+ * @package wp-yomigana
+ */
+class Gutenberg extends Application {
+
+	/**
+	 * Constructor
+	 */
+	protected function __construct() {
+		add_action( 'init', [ $this, 'register_script' ], 10 );
+		add_action( 'init', [ $this, 'register_block' ], 11 );
+	}
+
+	/**
+	 * Register scripts.
+	 */
+	public function register_script() {
+		// Register DL.
+		wp_register_script( 'wp-yomigana-dl', $this->assets . '/js/dist/definition-list.js', [ 'wp-blocks', 'wp-editor' ], self::VERSION, true );
+		wp_localize_script( 'wp-yomigana-dl', 'YomiganaDl', [
+			'label' => __( 'Definition List', 'wp-yomigana' ),
+		] );
+		wp_register_style( 'wp-yomigana-dl', $this->assets . '/css/editor-dl.css', [], self::VERSION );
+		// Register dt
+		wp_register_script( 'wp-yomigana-dt', $this->assets . '/js/dist/definition-term.js', [ 'wp-blocks', 'wp-editor' ], self::VERSION, true );
+		wp_localize_script( 'wp-yomigana-dt', 'YomiganaDt', [
+			'label' => __( 'Term', 'wp-yomigana' ),
+		] );
+		wp_register_script( 'wp-yomigana-dd', $this->assets . '/js/dist/definition-description.js', [ 'wp-blocks', 'wp-editor' ], self::VERSION, true );
+		wp_localize_script( 'wp-yomigana-dd', 'YomiganaDd', [
+			'label' => __( 'Description', 'wp-yomigana' ),
+		] );
+	}
+
+	/**
+	 * Register gutenberg block.
+	 */
+	public function register_block() {
+		if ( ! function_exists( 'register_block_type' ) ) {
+			return;
+		}
+		register_block_type( 'wp-yomigana/dl', [
+			'editor_style'  => 'wp-yomigana-dl',
+			'editor_script' => 'wp-yomigana-dl',
+		] );
+		register_block_type( 'wp-yomigana/dt', [
+			'editor_script' => 'wp-yomigana-dt',
+		] );
+		register_block_type( 'wp-yomigana/dd', [
+			'editor_script' => 'wp-yomigana-dd',
+		] );
+	}
+}