Override AlignmentControl component so it includes the Justify text option

projects/packages/jetpack-mu-wpcom/changelog/update-alignment-control-so-it-includes-justify-option

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Override the AlignmentControl core component so it includes the justify option.

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -326,6 +326,7 @@ public static function load_wpcom_user_features() {
 		require_once __DIR__ . '/features/replace-site-visibility/replace-site-visibility.php';
 		require_once __DIR__ . '/features/stats/stats.php';
 		require_once __DIR__ . '/features/wpcom-admin-bar/wpcom-admin-bar.php';
+		require_once __DIR__ . '/features/wpcom-alignment-control/wpcom-alignment-control.php';
 		require_once __DIR__ . '/features/wpcom-admin-interface/wpcom-admin-interface.php';
 		require_once __DIR__ . '/features/wpcom-admin-menu/wpcom-admin-menu.php';
 		require_once __DIR__ . '/features/wpcom-command-palette/wpcom-command-palette.php';

projects/packages/jetpack-mu-wpcom/src/features/wpcom-alignment-control/style.scss

@@ -0,0 +1,3 @@
+.has-text-align-justify {
+	text-align: justify;
+}

projects/packages/jetpack-mu-wpcom/src/features/wpcom-alignment-control/wpcom-alignment-control.js

@@ -0,0 +1,84 @@
+import { AlignmentControl, BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { Fragment } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+import { alignCenter, alignJustify, alignLeft, alignRight } from '@wordpress/icons';
+
+/**
+ * Hide the default text alignment controls for paragraph blocks.
+ */
+addFilter(
+	'editor.BlockEdit',
+	'jetpack/hide-text-align-css',
+	BlockEdit => {
+		if ( ! document.getElementById( 'jetpack-hide-text-align-css' ) ) {
+			const label = __( 'Align text', 'jetpack-mu-wpcom' );
+			const style = document.createElement( 'style' );
+
+			style.id = 'jetpack-hide-text-align-css';
+			style.textContent = `
+                :not(.jetpack-enhanced-alignment-control) > .components-dropdown .components-button[aria-label*="${ label }"] {
+                    display: none !important;
+                }
+            `;
+
+			document.head.appendChild( style );
+		}
+
+		return BlockEdit;
+	},
+	1
+);
+
+const ALIGNMENT_CONTROLS = [
+	{ icon: alignLeft, title: __( 'Align text left', 'jetpack-mu-wpcom' ), align: 'left' },
+	{
+		icon: alignCenter,
+		title: __( 'Align text center', 'jetpack-mu-wpcom' ),
+		align: 'center',
+	},
+	{ icon: alignRight, title: __( 'Align text right', 'jetpack-mu-wpcom' ), align: 'right' },
+	{
+		icon: alignJustify,
+		title: __( 'Justify text', 'jetpack-mu-wpcom' ),
+		align: 'justify',
+	},
+];
+
+/**
+ * Enhance the alignment control for paragraph blocks adding the Justify option.
+ */
+const withEnhancedAlignmentControl = createHigherOrderComponent( BlockEdit => {
+	return props => {
+		if ( props.name !== 'core/paragraph' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const { attributes, setAttributes } = props;
+		const { align } = attributes;
+
+		return (
+			<Fragment>
+				<BlockControls group="block" key="custom-alignment-controls">
+					<ToolbarGroup className="jetpack-enhanced-alignment-control">
+						<AlignmentControl
+							value={ align }
+							onChange={ newAlign => setAttributes( { align: newAlign } ) }
+							alignmentControls={ ALIGNMENT_CONTROLS }
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+
+				<BlockEdit { ...props } />
+			</Fragment>
+		);
+	};
+}, 'withEnhancedAlignmentControl' );
+
+addFilter(
+	'editor.BlockEdit',
+	'my-plugin/enhanced-alignment-control',
+	withEnhancedAlignmentControl
+);

projects/packages/jetpack-mu-wpcom/src/features/wpcom-alignment-control/wpcom-alignment-control.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * WPCOM Add justify text option to Alignment Control
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+use Automattic\Jetpack\Jetpack_Mu_Wpcom;
+
+/**
+ * Enqueue script for the WPCOM Alignment Control modifications.
+ */
+function wpcom_enqueue_alignment_control_assets() {
+	wp_enqueue_script(
+		'wpcom-alignment-control',
+		plugins_url( 'build/wpcom-alignment-control/wpcom-alignment-control.js', Jetpack_Mu_Wpcom::BASE_FILE ),
+		array(),
+		filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-alignment-control/wpcom-alignment-control.js' ),
+		true
+	);
+
+	wp_enqueue_style(
+		'wpcom-alignment-control',
+		plugins_url( 'build/wpcom-alignment-control/wpcom-alignment-control.css', Jetpack_Mu_Wpcom::BASE_FILE ),
+		array(),
+		filemtime( Jetpack_Mu_Wpcom::BASE_DIR . 'build/wpcom-alignment-control/wpcom-alignment-control.css' )
+	);
+}
+
+add_action( 'enqueue_block_editor_assets', 'wpcom_enqueue_alignment_control_assets' );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-block-editor/class-jetpack-wpcom-block-editor.php

@@ -353,7 +353,6 @@ public function enqueue_block_editor_assets() {
 				'wpcomGutenberg',
 				array(
 					'richTextToolbar' => array(
-						'justify'   => __( 'Justify', 'jetpack-mu-wpcom' ),
 						'underline' => __( 'Underline', 'jetpack-mu-wpcom' ),
 					),
 				)

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -37,6 +37,10 @@ module.exports = async () => {
 					'./src/features/paragraph-block-placeholder/paragraph-block-placeholder.js',
 				'tags-education': './src/features/tags-education/tags-education.js',
 				'wpcom-admin-bar': './src/features/wpcom-admin-bar/wpcom-admin-bar.js',
+				'wpcom-alignment-control': [
+					'./src/features/wpcom-alignment-control/wpcom-alignment-control.js',
+					'./src/features/wpcom-alignment-control/style.scss',
+				],
 				'wpcom-blocks-code-block-definition':
 					'./src/features/wpcom-blocks/code/block-definition/block-definition.tsx',
 				'wpcom-blocks-code-editor-style': './src/features/wpcom-blocks/code/editor.css',

projects/plugins/jetpack/changelog/update-alignment-control-so-it-includes-justify-option

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Override the AlignmentControl core component so it includes the justify option.