add css variables for each width defined in theme.json

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.
 

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};
 					}

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 <[email protected]>",
   "license": "GPL-2.0-or-later",