Text align block controls

blocks.js

@@ -7,10 +7,14 @@ var getNextSibling = siblingGetter( 'next' );
 var getPreviousSibling = siblingGetter( 'previous' );
 var getTagType = getConfig.bind( null, 'tagTypes' );
 var getTypeKinds = getConfig.bind( null, 'typeKinds' );
-var setImageFullBleed = setImageState.bind( null, 'align-full-bleed' );
-var setImageAlignNone = setImageState.bind( null, '' );
-var setImageAlignLeft = setImageState.bind( null, 'align-left' );
-var setImageAlignRight = setImageState.bind( null, 'align-right' );
+var setImageFullBleed = setElementState.bind( null, 'align-full-bleed' );
+var setImageAlignNone = setElementState.bind( null, '' );
+var setImageAlignLeft = setElementState.bind( null, 'align-left' );
+var setImageAlignRight = setElementState.bind( null, 'align-right' );
+
+var setTextAlignLeft = setElementState.bind( null, 'align-left' );
+var setTextAlignCenter = setElementState.bind( null, 'align-center' );
+var setTextAlignRight = setElementState.bind( null, 'align-right' );
 
 /**
  * Globals
@@ -45,6 +49,9 @@ var blockControls = queryFirst( '.block-controls' );
 var inlineControls = queryFirst( '.inline-controls' );
 var insertBlockButton = queryFirst( '.insert-block__button' );
 var insertBlockMenu = queryFirst( '.insert-block__menu' );
+var textAlignLeft = queryFirst( '.block-text__align-left' );
+var textAlignCenter = queryFirst( '.block-text__align-center' );
+var textAlignRight = queryFirst( '.block-text__align-right' );
 var imageFullBleed = queryFirst( '.block-image__full-width' );
 var imageAlignNone = queryFirst( '.block-image__no-align' );
 var imageAlignLeft = queryFirst( '.block-image__align-left' );
@@ -90,15 +97,15 @@ function getBlocks() {
 function selectBlock( event ) {
 	clearBlocks();
 	event.stopPropagation();
-	event.target.className += ' is-selected';
+	event.target.classList.add( 'is-selected' );
 
 	selectedBlock = event.target;
 	showControls( selectedBlock );
 }
 
 function clearBlocks() {
 	getBlocks().forEach( function( block ) {
-		block.className = block.className.replace( 'is-selected', '' );
+		block.classList.remove( 'is-selected' );
 	} );
 	selectedBlock = null;
 
@@ -121,11 +128,10 @@ function showControls( node ) {
 	switcher.style.top = ( position.top + 18 + window.scrollY ) + 'px';
 
 	// show/hide block-specific block controls
-	var kinds = getTypeKinds( blockType );
-	var kindClasses = kinds.map( function( kind ) {
-		return 'is-' + kind;
-	} ).join( ' ' );
-	blockControls.className = 'block-controls ' + kindClasses;
+	blockControls.className = 'block-controls';
+	getTypeKinds( blockType ).forEach( function( kind ) {
+		blockControls.classList.add( 'is-' + kind );
+	} );
 	blockControls.style.display = 'block';
 
 	// reposition block-specific block controls
@@ -188,6 +194,16 @@ function attachControlActions() {
 		}
 	} );
 
+	// Text block event handlers.
+	textAlignLeft.addEventListener( 'click', setTextAlignLeft, false );
+	textAlignCenter.addEventListener( 'click', setTextAlignCenter, false );
+	textAlignRight.addEventListener( 'click', setTextAlignRight, false );
+
+	switcherButtons.forEach( function( button ) {
+		button.addEventListener( 'click', showSwitcherMenu, false );
+	} );
+
+	// Image block event handlers.
 	imageFullBleed.addEventListener( 'click', setImageFullBleed, false );
 	imageAlignNone.addEventListener( 'click', setImageAlignNone, false );
 	imageAlignLeft.addEventListener( 'click', setImageAlignLeft, false );
@@ -310,9 +326,12 @@ function showSwitcherMenu( event ) {
 	switcherMenu.style.display = 'block';
 }
 
-function setImageState( classes, event ) {
+function setElementState( className, event ) {
 	event.stopPropagation();
-	selectedBlock.className = 'is-selected ' + classes;
+	selectedBlock.className = 'is-selected';
+	if ( className ) {
+		selectedBlock.classList.add( className );
+	}
 }
 
 function l( data ) {

index.html

@@ -19,13 +19,13 @@
 			</span>
 		</div>
 		<div class="block-controls">
-			<button class="block-text is-active">
+			<button class="block-text block-text__align-left is-active">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Left</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm10-6H4v2h10v-2zM4 9v2h16V9H4zm10-4H4v2h10V5z"/></g></svg>
 			</button>
-			<button class="block-text">
+			<button class="block-text block-text__align-center">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Center</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M4 19h16v-2H4v2zm13-6H7v2h10v-2zM4 9v2h16V9H4zm13-4H7v2h10V5z"/></g></svg>
 			</button>
-			<button class="block-text">
+			<button class="block-text block-text__align-right">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Align Right</title><rect x="0" fill="none" width="24" height="24"/><g><path d="M20 17H4v2h16v-2zm-10-2h10v-2H10v2zM4 9v2h16V9H4zm6-2h10V5H10v2z"/></g></svg>
 			</button>
 			<button class="block-image block-image__no-align">

style.css

@@ -442,6 +442,43 @@ img.is-selected {
 	fill: #191e23;
 }
 
+/*
+ * Text actions
+ */
+
+p.align-left,
+h1.align-left,
+h2.align-left,
+h3.align-left,
+h4.align-left,
+h5.align-left,
+h6.align-left,
+blockquote.align-left {
+	text-align: left;
+}
+
+p.align-center,
+h1.align-center,
+h2.align-center,
+h3.align-center,
+h4.align-center,
+h5.align-center,
+h6.align-center,
+blockquote.align-center {
+	text-align: center;
+}
+
+p.align-right,
+h1.align-right,
+h2.align-right,
+h3.align-right,
+h4.align-right,
+h5.align-right,
+h6.align-right,
+blockquote.align-right {
+	text-align: right;
+}
+
 /*
  * Image actions
  */