RichText: Extend the AlignmentToolbar

packages/block-editor/src/components/alignment-toolbar/index.js

@@ -35,19 +35,30 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 	},
 ];
 
-export function AlignmentToolbar( { isCollapsed, value, onChange, alignmentControls = DEFAULT_ALIGNMENT_CONTROLS } ) {
+export function AlignmentToolbar( {
+	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
+	customAlignmentTypes,
+	isCollapsed,
+	onChange,
+	value,
+} ) {
 	function applyOrUnset( align ) {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find( alignmentControls, ( control ) => control.align === value );
+	const extendedAlignmentControls = [
+		...alignmentControls,
+		...customAlignmentTypes,
+	];
+
+	const activeAlignment = find( extendedAlignmentControls, ( control ) => control.align === value );
 
 	return (
 		<Toolbar
 			isCollapsed={ isCollapsed }
 			icon={ activeAlignment ? activeAlignment.icon : 'editor-alignleft' }
 			label={ __( 'Change Text Alignment' ) }
-			controls={ alignmentControls.map( ( control ) => {
+			controls={ extendedAlignmentControls.map( ( control ) => {
 				const { align } = control;
 				const isActive = ( value === align );
 
@@ -69,12 +80,20 @@ export default compose(
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
 	withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => {
-		const { getBlockRootClientId, getSettings } = select( 'core/block-editor' );
+		const { getSelectedBlock, getBlockRootClientId, getSettings } = select( 'core/block-editor' );
+		const { getCustomAlignmentTypesForBlock } = select( 'core/rich-text' );
+
+		const selectedBlock = getSelectedBlock();
+		const customAlignmentTypes = selectedBlock ?
+			getCustomAlignmentTypesForBlock( selectedBlock.name ) :
+			[];
+
 		return {
 			isCollapsed: isCollapsed || ! isLargeViewport || (
 				! getSettings().hasFixedToolbar &&
 				getBlockRootClientId( clientId )
 			),
+			customAlignmentTypes,
 		};
 	} ),
 )( AlignmentToolbar );

packages/edit-post/src/index.js

@@ -11,6 +11,8 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
 
+import { registerCustomAlignmentType } from '@wordpress/rich-text';
+
 /**
  * Internal dependencies
  */
@@ -83,6 +85,13 @@ export function initializeEditor( id, postType, postId, settings, initialEdits )
 		'core/editor.publish',
 	] );
 
+	registerCustomAlignmentType( 'test/custom-align-center', {
+		align: 'center',
+		icon: 'editor-aligncenter',
+		title: 'Custom Align Center',
+		blockName: 'core/paragraph',
+	} );
+
 	render(
 		<Editor
 			settings={ settings }

packages/rich-text/README.md

@@ -208,6 +208,24 @@ _Returns_
 
 -   `Object`: A new combined value.
 
+<a name="registerCustomAlignmentType" href="#registerCustomAlignmentType">#</a> **registerCustomAlignmentType**
+
+Registers a new custom alignment type provided a unique name and an object defining its
+behavior.
+
+_Parameters_
+
+-   _name_ `string`: Custom alignment name.
+-   _settings_ `Object`: Custom alignment settings.
+-   _settings.blockName_ `string`: The block name this custom alignment will be added to the Rich Text alignment toolbar.
+-   _settings.align_ `string`: The alignment setting.
+-   _settings.title_ `string`: Name of the custom alignment.
+-   _settings.icon_ `string`: The icon to be displayed in the alignment toolbar.
+
+_Returns_
+
+-   `(Object|undefined)`: The Custom alignment, if it has been successfully registered; otherwise `undefined`.
+
 <a name="registerFormatType" href="#registerFormatType">#</a> **registerFormatType**
 
 Registers a new format provided a unique name and an object defining its

packages/rich-text/src/index.js

@@ -15,6 +15,7 @@ export { getTextContent } from './get-text-content';
 export { isCollapsed } from './is-collapsed';
 export { isEmpty, isEmptyLine } from './is-empty';
 export { join } from './join';
+export { registerCustomAlignmentType } from './register-custom-alignment-type';
 export { registerFormatType } from './register-format-type';
 export { removeFormat } from './remove-format';
 export { remove } from './remove';

packages/rich-text/src/register-custom-alignment-type.js

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch, select } from '@wordpress/data';
+
+/**
+ * Registers a new custom alignment type provided a unique name and an object defining its
+ * behavior.
+ *
+ * @param {string} name               Custom alignment name.
+ * @param {Object} settings           Custom alignment settings.
+ * @param {string} settings.blockName The block name this custom alignment will be added to the Rich Text alignment toolbar.
+ * @param {string} settings.align     The alignment setting.
+ * @param {string} settings.title     Name of the custom alignment.
+ * @param {string} settings.icon      The icon to be displayed in the alignment toolbar.
+ *
+ * @return {Object|undefined} The Custom alignment, if it has been successfully registered;
+ *                            otherwise `undefined`.
+ */
+export function registerCustomAlignmentType( name, settings ) {
+	settings = {
+		name,
+		...settings,
+	};
+
+	if ( typeof settings.name !== 'string' ) {
+		window.console.error(
+			'Custom alignment names must be strings.'
+		);
+		return;
+	}
+
+	if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( settings.name ) ) {
+		window.console.error(
+			'Custom alignment names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-alignment'
+		);
+		return;
+	}
+
+	if (
+		typeof settings.blockName !== 'string' ||
+		settings.blockName === ''
+	) {
+		window.console.error(
+			`Custom alignment block name must be a string.`
+		);
+		return;
+	}
+
+	if ( ! select( 'core/blocks' ).getBlockType( settings.blockName ) ) {
+		window.console.error(
+			'Custom alignment block "' + settings.blockName + '" must be registered.'
+		);
+		return;
+	}
+
+	if ( select( 'core/rich-text' ).getCustomAlignmentType( settings.name, settings.blockName ) ) {
+		window.console.error(
+			'Custom alignment "' + settings.name + '" is already registered.'
+		);
+		return;
+	}
+
+	if ( ! ( 'title' in settings ) || settings.title === '' ) {
+		window.console.error(
+			'The custom alignment "' + settings.name + '" must have a title.'
+		);
+		return;
+	}
+
+	if ( ! ( 'icon' in settings ) || settings.icon === '' ) {
+		window.console.error(
+			'The custom alignment "' + settings.name + '" must have an icon.'
+		);
+		return;
+	}
+
+	if ( ! ( 'align' in settings ) || settings.align === '' ) {
+		window.console.error(
+			'The custom alignment "' + settings.name + '" must have an alignment setting.'
+		);
+		return;
+	}
+
+	dispatch( 'core/rich-text' ).addCustomAlignmentTypes( settings );
+
+	return settings;
+}

packages/rich-text/src/store/actions.js

@@ -3,6 +3,34 @@
  */
 import { castArray } from 'lodash';
 
+/**
+ * Returns an action object used in signalling that custom alignment types have been added.
+ *
+ * @param {Array|Object} customAlignmentTypes Alignment types received.
+ *
+ * @return {Object} Action object.
+ */
+export function addCustomAlignmentTypes( customAlignmentTypes ) {
+	return {
+		type: 'ADD_CUSTOM_ALIGNMENT_TYPES',
+		customAlignmentTypes: castArray( customAlignmentTypes ),
+	};
+}
+
+/**
+ * Returns an action object used to remove a registered custom alignment type.
+ *
+ * @param {string|Array} names Custom alignment name.
+ *
+ * @return {Object} Action object.
+ */
+export function removeCustomAlignmentTypes( names ) {
+	return {
+		type: 'REMOVE_CUSTOM_ALIGNMENT_TYPES',
+		names: castArray( names ),
+	};
+}
+
 /**
  * Returns an action object used in signalling that format types have been
  * added.

packages/rich-text/src/store/reducer.js

@@ -8,6 +8,28 @@ import { keyBy, omit } from 'lodash';
  */
 import { combineReducers } from '@wordpress/data';
 
+/**
+ * Reducer managing the alignment types
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function customAlignmentTypes( state = {}, action ) {
+	switch ( action.type ) {
+		case 'ADD_CUSTOM_ALIGNMENT_TYPES':
+			return {
+				...state,
+				...keyBy( action.customAlignmentTypes, 'name' ),
+			};
+		case 'REMOVE_CUSTOM_ALIGNMENT_TYPES':
+			return omit( state, action.names );
+	}
+
+	return state;
+}
+
 /**
  * Reducer managing the format types
  *
@@ -30,4 +52,4 @@ export function formatTypes( state = {}, action ) {
 	return state;
 }
 
-export default combineReducers( { formatTypes } );
+export default combineReducers( { customAlignmentTypes, formatTypes } );

packages/rich-text/src/store/selectors.js

@@ -2,7 +2,46 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { find } from 'lodash';
+import { filter, find } from 'lodash';
+
+/**
+ * Returns all the available custom alignment types.
+ *
+ * @param {Object} state Data state.
+ *
+ * @return {Array} Custom alignment types.
+ */
+export const getCustomAlignmentTypes = createSelector(
+	( state ) => Object.values( state.customAlignmentTypes ),
+	( state ) => [
+		state.customAlignmentTypes,
+	]
+);
+
+/**
+ * Returns the custom alignment types available for a given block.
+ *
+ * @param {Object} state Data state.
+ * @param {string} blockName Block name.
+ *
+ * @return {Array} Custom alignment types.
+ */
+export function getCustomAlignmentTypesForBlock( state, blockName ) {
+	return filter( state.customAlignmentTypes, ( type ) => type.blockName === blockName );
+}
+
+/**
+ * Returns a custom alignment type.
+ *
+ * @param {Object} state Data state.
+ * @param {string} name Alignment name.
+ * @param {string} blockName Block name.
+ *
+ * @return {?Object} Custom alignment types.
+ */
+export function getCustomAlignmentType( state, name, blockName ) {
+	return find( state.customAlignmentTypes, ( type ) => type.name === name && type.blockName === blockName );
+}
 
 /**
  * Returns all the available format types.