modernize plugin for WP 6.6 edits

README.txt

@@ -4,7 +4,7 @@ Donate link: https://tri.be
 Tags: blocks, editor, alignment
 Requires at least: 6.0
 Tested up to: 6.5.2
-Stable tag: 1.0.7
+Stable tag: 1.0.8
 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.8 =
+* Updates to bring the plugin into the WP 6.6 modern age.
+
 = 1.0.7 =
 * Updates plugin to also create CSS variables for each defined width.
 

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.7
+ * Version:           1.0.8
  * 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.7';
+		$this->version      = '1.0.8';
 		$this->name         = 'block-editor-custom-alignments';
 		$this->base_url     = trailingslashit( plugin_dir_url( __FILE__ ) );
 		$this->theme_json   = $this->block_editor_custom_alignments_theme_json();
@@ -103,11 +103,11 @@ public function block_editor_custom_alignments_admin_styles(): void {
 
 		foreach ( $this->theme_json->settings->_experimentalLayout as $alignment ) {
 			$admin_css .= "
-					:is(.editor-styles-wrapper) {
+					:root {
 						--tribe--style--global--{$alignment->slug}-size: {$alignment->width};
 					}
 					:is(.editor-styles-wrapper) .block-editor-block-list__layout.is-root-container .wp-block.align{$alignment->slug} {
-							max-width: {$alignment->width};
+						max-width: var(--tribe--style--global--{$alignment->slug}-size);
 					}
 			";
 		}
@@ -129,11 +129,11 @@ public function block_editor_custom_alignments_public_styles(): void {
 
 		foreach ( $this->theme_json->settings->_experimentalLayout as $alignment ) {
 			$theme_css .= "
-					body {
+					:root {
 						--tribe--style--global--{$alignment->slug}-size: {$alignment->width};
 					}
-					body .align{$alignment->slug} {
-							max-width: {$alignment->width};
+					.is-layout-constrained > :where(.align{$alignment->slug}) {
+						max-width: var(--tribe--style--global--{$alignment->slug}-size);
 					}
 			";
 		}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "block-editor-custom-alignments",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "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",