Block Editor: Ensure Align options are always in the same order (#26269)

WordPress · Oct 21, 2020 · e9cf78f · e9cf78f
1 parent 68294f3
commit e9cf78f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
@@ -59,7 +59,9 @@ export function getValidAlignments(
 ) {
 	let validAlignments;
 	if ( Array.isArray( blockAlign ) ) {
-		validAlignments = blockAlign;
+		validAlignments = ALL_ALIGNMENTS.filter( ( value ) =>
+			blockAlign.includes( value )
+		);
 	} else if ( blockAlign === true ) {
 		// `true` includes all alignments...
 		validAlignments = ALL_ALIGNMENTS;

diff --git a/packages/block-editor/src/hooks/test/align.js b/packages/block-editor/src/hooks/test/align.js
@@ -74,6 +74,18 @@ describe( 'align', () => {
 			] );
 		} );
 
+		it( 'should return all aligns sorted when provided in the random order', () => {
+			expect(
+				getValidAlignments( [
+					'full',
+					'right',
+					'center',
+					'wide',
+					'left',
+				] )
+			).toEqual( [ 'left', 'center', 'right', 'wide', 'full' ] );
+		} );
+
 		it( 'should return all aligns if block defines align support as true', () => {
 			expect( getValidAlignments( true ) ).toEqual( [
 				'left',
@@ -83,7 +95,6 @@ describe( 'align', () => {
 				'full',
 			] );
 		} );
-
 		it( 'should return all aligns except wide if wide align explicitly false on the block', () => {
 			expect( getValidAlignments( true, false, true ) ).toEqual( [
 				'left',