From 2ae93e124f8a8adb6bb64a90cb035db2381acf28 Mon Sep 17 00:00:00 2001
From: BE-Webdesign <cromleyedwin89@gmail.com>
Date: Wed, 8 Feb 2017 23:53:13 -0500
Subject: [PATCH] Add event handlers to the text block's block level controls.
 This enables headings, and paragraphs to properly change from left aligned,
 to center, or right aligned. The CSS currently only supports paragraphs,
 headings 1-6, and blockquote HTML elements.

---
 blocks.js  | 27 ++++++++++++++++++++++-----
 index.html |  6 +++---
 style.css  | 37 +++++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/blocks.js b/blocks.js
index 9d2cf17399ae78..5625112357d4a3 100644
--- a/blocks.js
+++ b/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 ) {
diff --git a/index.html b/index.html
index 2f509ae6a93a58..ce4f7c6d5e6654 100644
--- a/index.html
+++ b/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">
diff --git a/style.css b/style.css
index a29b06ec9fa926..dee07fe18ce790 100644
--- a/style.css
+++ b/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
  */