Merge branch 'feature/award-desc-block' into develop

inc/classes/class-award-post-type.php

@@ -20,6 +20,9 @@ class Award_Post_Type {
 	public function setup(): void {
 		add_action( 'init', array( $this, 'action_register_post_types' ) );
 		add_action( 'init', array( $this, 'action_register_award_meta' ) );
+		add_action( 'init', array( $this, 'action_register_post_type_blocks' ) );
+		add_action( 'admin_enqueue_scripts', array( $this, 'action_register_editor_assets' ) );
+		add_filter( 'enter_title_here', array( $this, 'filter_post_title_placeholder' ), 10, 2 );
 	}
 
 	/**
@@ -115,6 +118,80 @@ public function action_register_award_meta() {
 		);
 	}
 
+	/**
+	 * Registers blocks for the ER Awards post type.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @see register_block_type
+	 * @return void
+	 */
+	public function action_register_post_type_blocks(): void {
+		$blocks_dir = plugin_dir_path( dirname( __DIR__ ) ) . 'build/blocks';
+		if ( ! is_dir( $blocks_dir ) ) {
+			return;
+		}
+
+		$results    = scandir( $blocks_dir );
+		$exclusions = array( '.', '..', 'CVS', 'node_modules', 'vendor', 'bower_components' );
+		$dirs       = array();
+
+		foreach ( $results as $result ) {
+			if ( in_array( $result, $exclusions, true ) ) {
+				continue;
+			}
+			$result_path = $blocks_dir . '/' . $result;
+			if ( is_dir( $result_path ) ) {
+				if ( ! in_array( 'block.json', scandir( $result_path ), true ) ) {
+					continue;
+				}
+				$dirs[] = trailingslashit( $result_path );
+			}
+		}
+
+		if ( ! empty( $dirs ) ) {
+			foreach ( $dirs as $dir ) {
+				register_block_type( $dir );
+			}
+		}
+	}
+
+	/**
+	 * Registers editor assets.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @see wp_register_script
+	 * @return void
+	 */
+	public function action_register_editor_assets(): void {
+		$asset_file = include plugin_dir_path( dirname( __DIR__ ) ) . 'build/index.asset.php';
+
+		wp_register_script(
+			'hrswp-employee-recognition',
+			plugins_url( 'build/index.js', dirname( __DIR__ ) ),
+			$asset_file['dependencies'],
+			$asset_file['version'],
+			true
+		);
+	}
+
+	/**
+	 * Replaces the "Add title" placeholder for the ER Awards post type.
+	 *
+	 * @since 1.0.0
+	 *
+	 * @param string   $text Placeholder text. Default 'Add title'.
+	 * @param \WP_Post $post The Post object.
+	 * @return string The placeholder text.
+	 */
+	public function filter_post_title_placeholder( string $text, \WP_Post $post ): string {
+		if ( 'hrswp_er_awards' !== $post->post_type ) {
+			return $text;
+		}
+		return __( 'Add award name', 'hrswp-employee-recognition' );
+	}
+
 	/**
 	 * Returns a singleton instance of the class.
 	 *

src/blocks/er-award-description/block.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "hrswp/er-award-description",
+	"title": "ER Award Description",
+	"category": "text",
+	"description": "The ER award description.",
+	"keywords": [ "text" ],
+	"textdomain": "default",
+	"attributes": {
+		"align": {
+			"type": "string"
+		},
+		"content": {
+			"type": "string",
+			"source": "html",
+			"selector": "p",
+			"default": ""
+		},
+		"placeholder": {
+			"type": "string"
+		},
+		"direction": {
+			"type": "string",
+			"enum": [ "ltr", "rtl" ]
+		}
+	},
+	"supports": {
+		"className": false
+	},
+	"editorScript": "hrswp-employee-recognition"
+}

src/blocks/er-award-description/edit.js

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x, isRTL } from '@wordpress/i18n';
+import { ToolbarDropdownMenu } from '@wordpress/components';
+import {
+	AlignmentControl,
+	BlockControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { formatLtr } from '@wordpress/icons';
+
+function erAwardRTLControl( { direction, setDirection } ) {
+	return (
+		isRTL() && (
+			<ToolbarDropdownMenu
+				controls={ [
+					{
+						icon: formatLtr,
+						title: _x( 'Left to right', 'editor button' ),
+						isActive: direction === 'ltr',
+						onClick() {
+							setDirection(
+								direction === 'ltr' ? undefined : 'ltr'
+							);
+						},
+					},
+				] }
+			/>
+		)
+	);
+}
+
+function erAwardDescriptionEdit( {
+	attributes,
+	mergeBlocks,
+	onReplace,
+	onRemove,
+	setAttributes,
+} ) {
+	const { align, content, direction, placeholder } = attributes;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ align }` ]: align,
+		} ),
+		style: { direction },
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ align }
+					onChange={ ( newAlign ) =>
+						setAttributes( { align: newAlign } )
+					}
+				/>
+				<erAwardRTLControl
+					direction={ direction }
+					setDirection={ ( newDirection ) =>
+						setAttributes( { direction: newDirection } )
+					}
+				/>
+			</BlockControls>
+			<RichText
+				identifier="content"
+				tagName="p"
+				{ ...blockProps }
+				value={ content }
+				onChange={ ( newContent ) =>
+					setAttributes( { content: newContent } )
+				}
+				onMerge={ mergeBlocks }
+				onReplace={ onReplace }
+				onRemove={ onRemove }
+				aria-label={
+					content
+						? __( 'ER Award Description' )
+						: __( 'Describe the award.' )
+				}
+				data-empty={ content ? false : true }
+				placeholder={ placeholder || __( 'Describe the award.' ) }
+				__unstableEmbedURLOnPaste
+				__unstableAllowPrefixTransformations
+			/>
+		</>
+	);
+}
+
+export default erAwardDescriptionEdit;

src/blocks/er-award-description/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { paragraph as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};

src/blocks/er-award-description/save.js

@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { align, content, direction } = attributes;
+	const className = classnames( {
+		[ `has-text-align-${ align }` ]: align,
+	} );
+
+	return (
+		<p { ...useBlockProps.save( { className, dir: direction } ) }>
+			<RichText.Content value={ content } />
+		</p>
+	);
+}

src/blocks/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import * as erAwardDescription from './er-award-description';
+
+const erAwardBlocks = [ erAwardDescription ];
+
+const registerBlock = ( block ) => {
+	if ( ! block ) {
+		return;
+	}
+	const { metadata, settings, name } = block;
+	registerBlockType( name, {
+		...metadata,
+		...settings,
+	} );
+};
+
+export const registerBlocks = () => {
+	erAwardBlocks.forEach( registerBlock );
+};

src/index.js

@@ -1,5 +1,8 @@
 /**
  * Internal dependencies
  */
+import { registerBlocks } from './blocks';
 import './editor.css';
 import './style.css';
+
+registerBlocks();