Skip to content

Commit

Permalink
Merge pull request #20 from moderntribe/fix/align-none-should-set-no-…
Browse files Browse the repository at this point in the history
…class

Fix issue with align none setting a class when it shouldn't
  • Loading branch information
GeoffDusome authored Jul 19, 2023
2 parents 3771eb4 + 8b99b37 commit 454afae
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 21 deletions.
5 changes: 4 additions & 1 deletion README.txt
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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

Expand Down
56 changes: 40 additions & 16 deletions admin/js/block-editor-custom-alignments-admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down Expand Up @@ -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
Expand All @@ -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 ) => {
Expand All @@ -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>`;
}
},
};

Expand Down
12 changes: 9 additions & 3 deletions block-editor-custom-alignments.php
Original file line number Diff line number Diff line change
Expand Up @@ -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+
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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;
}

}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down

0 comments on commit 454afae

Please sign in to comment.