diff --git a/README.txt b/README.txt index b609212..a34d781 100644 --- a/README.txt +++ b/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 diff --git a/admin/js/block-editor-custom-alignments-admin.js b/admin/js/block-editor-custom-alignments-admin.js index ca64f69..c4fb375 100644 --- a/admin/js/block-editor-custom-alignments-admin.js +++ b/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 = ``; } // 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 = ``; - } }, }; diff --git a/block-editor-custom-alignments.php b/block-editor-custom-alignments.php index 7781241..8fe7c52 100644 --- a/block-editor-custom-alignments.php +++ b/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; } } diff --git a/package.json b/package.json index 2ed8dd0..f8f89bf 100644 --- a/package.json +++ b/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 ", "license": "GPL-2.0-or-later",