Merge pull request #67 from BE-Webdesign/text-align-block-controls

Add event handlers to the text block's block level 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' );
@@ -187,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 );
@@ -309,7 +326,7 @@ function showSwitcherMenu( event ) {
 	switcherMenu.style.display = 'block';
 }
 
-function setImageState( className, event ) {
+function setElementState( className, event ) {
 	event.stopPropagation();
 	selectedBlock.className = 'is-selected';
 	if ( className ) {

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
  */