Merge pull request #20 from moderntribe/fix/align-none-should-set-no-…

…class

Fix issue with align none setting a class when it shouldn't

README.txt

@@ -4,7 +4,7 @@ Donate link: https://tri.be
 Tags: blocks, editor, alignment
 Requires at least: 6.0
 Tested up to: 6.2
-Stable tag: 1.0.5
+Stable tag: 1.0.6
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -21,6 +21,9 @@ The plugin runs off of an `_experimentalLayout` attribute in `theme.json` that a
 
 == Changelog ==
 
+= 1.0.6 =
+* Fixes an issue where blocks could get a class of `alignfalse` when selecting the "None" alignment in the toolbar.
+
 = 1.0.5 =
 * Use `enqueue_block_editor_assets` instead of `admin_enqueue_scripts` to prevent dependency errors
 

admin/js/block-editor-custom-alignments-admin.js

@@ -270,7 +270,7 @@
 				const allowedAlignControls = [];
 
 				for ( const alignment of combinedAlignments ) {
-					let { name, slug, icon, width, textdomain } = alignment;
+					const { name, slug, icon, width, textdomain } = alignment;
 
 					// check if this alignment is the currently selected alignment for the block and grab the icon for the active one
 					if (
@@ -331,9 +331,13 @@
 						title: controlTitle,
 						icon: blockAlignIcon( icon ),
 						onClick: () => {
-							if ( slug === 'none' ) {
-								// Because we don't want a "alignnone" classname in our block
-								slug = false;
+							// Change the current ToolbarDropdownMenu icon if the block align has been changed
+							const alignToolbarButton = document.querySelector(
+								'[aria-label="Align"]'
+							);
+
+							if ( alignToolbarButton ) {
+								alignToolbarButton.innerHTML = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="${ icon }"/></svg>`;
 							}
 
 							// set classes on the block depending on if a class is already set on the block
@@ -342,8 +346,10 @@
 
 							if (
 								currentClass !== undefined &&
-								currentClass.includes( ' ' )
+								currentClass.includes( ' ' ) &&
+								currentClass.includes( 'align' )
 							) {
+								// if we have multiple classes set on the element
 								const classArray = currentClass.split( ' ' );
 
 								classArray.forEach( ( singleClass, index ) => {
@@ -353,24 +359,42 @@
 								} );
 
 								updatedClass = classArray.join( ' ' );
-							} else {
+							} else if (
+								currentClass !== undefined &&
+								currentClass !== '' &&
+								currentClass.includes( 'align' )
+							) {
+								// if we only have one class set on the element and the class is "align..."
+								updatedClass = `align${ slug }`;
+							} else if (
+								currentClass !== undefined &&
+								currentClass !== '' &&
+								! currentClass.includes( 'align' )
+							) {
+								// if we only have one class set on the element and the class isn't "align..."
+								updatedClass = currentClass + ` align${ slug }`;
+							} else if (
+								currentClass === undefined ||
+								currentClass === ''
+							) {
+								// if we have no classes set on the element
 								updatedClass = `align${ slug }`;
+							} else {
+								updatedClass = '';
+							}
+
+							// if our updated class includes alignnone, remove it
+							if ( updatedClass.includes( 'alignnone' ) ) {
+								updatedClass = updatedClass
+									.replace( 'alignnone', '' )
+									.trim();
 							}
 
 							// Change the block align attribute
 							props.setAttributes( {
-								align: slug === undefined ? 'none' : slug,
+								align: slug,
 								className: updatedClass,
 							} );
-
-							// Change the current ToolbarDropdownMenu icon if the block align has been changed
-							const alignToolbarButton = document.querySelector(
-								'[aria-label="Align"]'
-							);
-
-							if ( alignToolbarButton ) {
-								alignToolbarButton.innerHTML = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="${ icon }"/></svg>`;
-							}
 						},
 					};
 

block-editor-custom-alignments.php

@@ -13,7 +13,7 @@
  * Plugin Name:       Block Editor Custom Alignments
  * Plugin URI:        https://https://github.com/moderntribe/block-editor-custom-alignments
  * Description:       Allows developers to add custom alignments to `theme.json` for use in the block editor.
- * Version:           1.0.5
+ * Version:           1.0.6
  * Author:            Modern Tribe
  * Author URI:        https://tri.be
  * License:           GPL-2.0+
@@ -54,7 +54,7 @@ class Block_Editor_Custom_Alignments {
 	public function __construct() {
 		global $pagenow;
 
-		$this->version      = '1.0.5';
+		$this->version      = '1.0.6';
 		$this->name         = 'block-editor-custom-alignments';
 		$this->base_url     = trailingslashit( plugin_dir_url( __FILE__ ) );
 		$this->theme_json   = $this->block_editor_custom_alignments_theme_json();
@@ -155,7 +155,13 @@ private function block_editor_custom_alignments_theme_json(): object {
 			return new \stdClass();
 		}
 
-		return json_decode( $theme_json );
+		$json_theme_json = json_decode( $theme_json );
+
+		if ( ! $json_theme_json ) {
+			return new \stdClass();
+		}
+
+		return $json_theme_json;
 	}
 
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "block-editor-custom-alignments",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Allows developers to add custom alignments to `theme.json` for use in the block editor.",
   "author": "Modern Tribe <[email protected]>",
   "license": "GPL-2.0-or-later",