Blocks: Add a Definition block

blocks/definition/README.md

@@ -0,0 +1,20 @@
+# Definition block
+
+A block to display a term and definition or abbreviation with semantic markup ( `<dl />`, `<dfn />`, `<abbr />` etc).
+
+Features:
+
+- Online definition lookup
+- Semantic markup of definitions and abbreviations
+
+### TODO
+
+- [ ] Multiple dictionary sources, and the ability to add one's own API key.
+- [ ] Support a list of definitions, or an accordion style for glossary pages that have lots of definitions in them
+- [ ] Add definition image/thumbnail option 
+- [ ] Add audio tag for pronunciation example
+- [ ] A permalink / easy to copy anchor link to the definition from the front-end
+
+![alt text][screenshot]
+
+[screenshot]: screenshot.png "Definition block screenshot"

blocks/definition/editor.scss

@@ -0,0 +1,96 @@
+/**
+ * Editor styles
+ */
+
+.wp-block-a8c-definition {
+  padding: 10px 10px;
+  .wp-block-a8c-definition__term {
+	font-size: 2.5rem;
+	border-bottom: 2px solid #eeeeee;
+	display: block;
+	margin-bottom: 10px;
+  }
+  .wp-block-a8c-definition__definition {
+	padding-left: 0;
+	margin-left: 0;
+  }
+  .wp-block-a8c-definition__term-metadata {
+	padding-left: 10px;
+	font-size: 14px;
+	opacity: 0.8;
+	font-style: italic;
+	font-weight: normal;
+  }
+  .wp-block-a8c-definition__term-text {
+	font-style: normal;
+  }
+  .wp-block-a8c-definition__term-definition {
+	padding-left: 10px;
+  }
+  .wp-block-a8c-definition__term-metadata-item {
+	display: inline-block;
+	margin-right: 8px;
+  }
+  .wp-block-a8c-definition__term-metadata-item:after {
+	content: ']';
+  }
+  .wp-block-a8c-definition__term-metadata-item:before {
+	content: '[';
+  }
+  // Minimal style
+  &.is-style-minimal,
+  &.is-minimal {
+	padding: 0;
+	.wp-block-a8c-definition__term {
+	  font-size: 2rem;
+	  border-bottom: 0;
+	  display: block;
+	  margin-bottom: 10px;
+	}
+	.wp-block-a8c-definition__term-metadata {
+	  padding-left: 0;
+	  font-size: .9rem;
+	  font-weight: normal;
+	  display: block;
+	}
+	.wp-block-a8c-definition__term-definition {
+	  padding-left: 0;
+	}
+	.wp-block-a8c-definition__term-metadata-item:after,
+	.wp-block-a8c-definition__term-metadata-item:before {
+	  content: '';
+	}
+  }
+}
+
+.wp-block-a8c-definition__panel-row--definition-settings {
+	display: flex;
+	flex-direction: column;
+	align-items: start;
+	margin-bottom: 24px;
+
+    .components-base-control {
+    	margin-bottom: 4px;
+    }
+
+	.wp-block-a8c-definition__definition-settings-help-text {
+		font-size: 12px;
+		font-style: normal;
+		color: rgb( 117, 117, 117 );
+	}
+}
+
+.wp-block-a8c-definition__search-control-container {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+
+	.wp-block-a8c-definition__search-button {
+		text-decoration: none;
+	}
+
+    .components-button {
+    	white-space: normal;
+    }
+}
+

blocks/definition/index.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ *  A term and definition block with semantic HTML.
+ */
+
+/**
+ * Register the blocks.
+ */
+add_action( 'init', function() {
+	register_block_type(
+		'a8c/definition',
+		[
+			'editor_script'   => 'block-experiments',
+			'style'           => 'block-experiments',
+			'editor_style'    => 'block-experiments-editor',
+		]
+	);
+
+	wp_set_script_translations( 'block-experiments', 'definition' );
+} );

blocks/definition/src/components/search-results.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies.
+ */
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+/**
+ * Search results for dictionary search.
+ *
+ * @param {Object} Props.
+ * @param {string} Props.selectedId
+ * @param {Array} Props.searchResults
+ * @param {Function} Props.onSelectDefinition
+ * @param {string} Props.title
+ * @return {WPElement} Element to render.
+ */
+export default function SearchResults( {
+	selectedId = '',
+	searchResults = [],
+	onSelectDefinition,
+	title,
+} ) {
+	return (
+		<>
+			<h4 className="wp-block-a8c-definition__search-results-title">
+				{ title }
+			</h4>
+			<ol className="wp-block-a8c-definition__search-results">
+				{ searchResults.length &&
+					searchResults.map( ( option ) => (
+						<li
+							className={ `wp-block-a8c-definition__search-results-item ${
+								selectedId === option.value ? 'is-selected' : ''
+							}` }
+							key={ option.value }
+						>
+							<Button
+								className="wp-block-a8c-definition__search-results-item-button"
+								isTertiary
+								onClick={ () =>
+									onSelectDefinition( option.value )
+								}
+							>
+								{ option.label }
+							</Button>
+						</li>
+					) ) }
+			</ol>
+		</>
+	);
+}

blocks/definition/src/components/term-metadata.js

@@ -0,0 +1,56 @@
+/**
+ * External dependencies.
+ */
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { findInCollection } from '../utils';
+import { PARTS_OF_SPEECH } from '../constants';
+
+/**
+ * Term metadata to render in both the editor and the save methods.
+ *
+ * @param {Object} Props.
+ * @param {string} Props.partOfSpeech
+ * @param {string} Props.phoneticTranscription
+ * @return {WPElement} Element to render.
+ */
+export function TermMetaData( { partOfSpeech, phoneticTranscription } ) {
+	const shouldShowTermMetaData = !! partOfSpeech || !! phoneticTranscription;
+
+	if ( ! shouldShowTermMetaData ) {
+		return null;
+	}
+	// Find a translated part of speech value from our list or use the raw value.
+	const partOfSpeechTitle =
+		findInCollection( PARTS_OF_SPEECH, 'value', partOfSpeech )?.title ||
+		partOfSpeech;
+
+	return (
+		<span className="wp-block-a8c-definition__definition wp-block-a8c-definition__term-metadata">
+			{ partOfSpeech && (
+				<span
+					aria-label={ __(
+						'The part of speech indicates how the word functions in meaning as well as grammatically within the sentence.',
+						'definition'
+					) }
+					className="wp-block-a8c-definition__term-metadata-item"
+				>
+					{ partOfSpeechTitle }
+				</span>
+			) }
+			{ phoneticTranscription && (
+				<span className="wp-block-a8c-definition__term-metadata-item">
+					{ phoneticTranscription }
+				</span>
+			) }
+		</span>
+	);
+}
+
+export default TermMetaData;

blocks/definition/src/constants.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+export const ABBREVIATION = 'abbreviation';
+
+export const DEFAULT_LOCALE = 'en';
+
+export const PARTS_OF_SPEECH = [
+	{
+		label: __( 'Choose a word class (optional)', 'definition' ),
+		value: '',
+	},
+	{
+		label: __( 'Noun, e.g., Apple', 'definition' ),
+		title: __( 'Noun', 'definition' ),
+		value: 'noun',
+	},
+	{
+		label: __( 'Verb, e.g., Eat', 'definition' ),
+		title: __( 'Verb', 'definition' ),
+		value: 'verb',
+	},
+	{
+		label: __( 'Article, e.g., The', 'definition' ),
+		title: __( 'Article', 'definition' ),
+		value: 'article',
+	},
+	{
+		label: __( 'Pronoun, e.g., Their', 'definition' ),
+		title: __( 'Pronoun', 'definition' ),
+		value: 'pronoun',
+	},
+	{
+		label: __( 'Preposition, e.g., With', 'definition' ),
+		title: __( 'Preposition', 'definition' ),
+		value: 'preposition',
+	},
+	{
+		label: __( 'Adverb, e.g., Quickly', 'definition' ),
+		title: __( 'Adverb', 'definition' ),
+		value: 'adverb',
+	},
+	{
+		label: __( 'Conjunction, e.g., And', 'definition' ),
+		title: __( 'Conjunction', 'definition' ),
+		value: 'conjunction',
+	},
+	{
+		label: __( 'Abbreviation, e.g., PLC', 'definition' ),
+		title: __( 'Abbreviation', 'definition' ),
+		value: ABBREVIATION,
+	},
+];