From a8e0ababccfa93269233ed1ff508728bb5c21bf3 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Wed, 7 Aug 2024 10:19:24 -0400 Subject: [PATCH] modernize plugin for WP 6.6 edits --- README.txt | 5 ++++- block-editor-custom-alignments.php | 14 +++++++------- package.json | 2 +- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/README.txt b/README.txt index 3b4c2d4..ca04e25 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.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. diff --git a/block-editor-custom-alignments.php b/block-editor-custom-alignments.php index 41d53c5..7fde86a 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.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); } "; } diff --git a/package.json b/package.json index f2e564c..a7d4d16 100644 --- a/package.json +++ b/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 ", "license": "GPL-2.0-or-later",