From 74f026d419dda06ee7e14c2d2478651139f99cc3 Mon Sep 17 00:00:00 2001
From: Geoff Dusome <geoffd@tri.be>
Date: Thu, 25 Apr 2024 12:25:01 -0400
Subject: [PATCH] add css variables for each width defined in theme.json

---
 README.txt                         |  7 +++++--
 block-editor-custom-alignments.php | 10 ++++++++--
 package-lock.json                  |  4 ++--
 package.json                       |  2 +-
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/README.txt b/README.txt
index a34d781..3b4c2d4 100644
--- a/README.txt
+++ b/README.txt
@@ -3,8 +3,8 @@ Contributors: moderntribe
 Donate link: https://tri.be
 Tags: blocks, editor, alignment
 Requires at least: 6.0
-Tested up to: 6.2
-Stable tag: 1.0.6
+Tested up to: 6.5.2
+Stable tag: 1.0.7
 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.7 =
+* Updates plugin to also create CSS variables for each defined width.
+
 = 1.0.6 =
 * Fixes an issue where blocks could get a class of `alignfalse` when selecting the "None" alignment in the toolbar.
 
diff --git a/block-editor-custom-alignments.php b/block-editor-custom-alignments.php
index 8fe7c52..41d53c5 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.6
+ * Version:           1.0.7
  * 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.6';
+		$this->version      = '1.0.7';
 		$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,6 +103,9 @@ public function block_editor_custom_alignments_admin_styles(): void {
 
 		foreach ( $this->theme_json->settings->_experimentalLayout as $alignment ) {
 			$admin_css .= "
+					:is(.editor-styles-wrapper) {
+						--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};
 					}
@@ -126,6 +129,9 @@ public function block_editor_custom_alignments_public_styles(): void {
 
 		foreach ( $this->theme_json->settings->_experimentalLayout as $alignment ) {
 			$theme_css .= "
+					body {
+						--tribe--style--global--{$alignment->slug}-size: {$alignment->width};
+					}
 					body .align{$alignment->slug} {
 							max-width: {$alignment->width};
 					}
diff --git a/package-lock.json b/package-lock.json
index 2e1684e..46da8c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "block-editor-custom-alignments",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "block-editor-custom-alignments",
-      "version": "1.0.0",
+      "version": "1.0.6",
       "license": "GPL-2.0-or-later",
       "devDependencies": {
         "@csstools/postcss-global-data": "^1.0.3",
diff --git a/package.json b/package.json
index f8f89bf..f2e564c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "block-editor-custom-alignments",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Allows developers to add custom alignments to `theme.json` for use in the block editor.",
   "author": "Modern Tribe <admin@tri.be>",
   "license": "GPL-2.0-or-later",