Fixing CSS error where I mean to use margin-inline-end for margin-rig…

…ht. Other minor formatting

Taking a clumsy stab at compat files so we can load the global styles and settings.

lib/block-supports/layout.php

@@ -63,7 +63,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			$style .= "$selector .alignfull { max-width: none; }";
 		}
 
-		$style .= "$selector .alignleft { float: left; margin-inline-start: 2em; margin-inline-end: 0; }";
+		$style .= "$selector .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }";
 		$style .= "$selector .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }";
 		if ( $has_block_gap_support ) {
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';

lib/compat/wordpress-5.9/script-loader.php

@@ -28,7 +28,7 @@ function gutenberg_enqueue_global_styles_assets() {
 		return;
 	}
 
-	$stylesheet = wp_get_global_stylesheet();
+	$stylesheet = gutenberg_get_global_stylesheet();
 
 	if ( empty( $stylesheet ) ) {
 		return;

lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php

@@ -42,4 +42,129 @@ public function get_patterns() {
 		}
 		return array();
 	}
+
+	/**
+	 * Returns the stylesheet that results of processing
+	 * the theme.json structure this object represents.
+	 *
+	 * @param array $types    Types of styles to load. Will load all by default. It accepts:
+	 *                         'variables': only the CSS Custom Properties for presets & custom ones.
+	 *                         'styles': only the styles section in theme.json.
+	 *                         'presets': only the classes for the presets.
+	 * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
+	 * @return string Stylesheet.
+	 */
+	public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null ) {
+		if ( null === $origins ) {
+			$origins = static::VALID_ORIGINS;
+		}
+
+		if ( is_string( $types ) ) {
+			// Dispatch error and map old arguments to new ones.
+			_deprecated_argument( __FUNCTION__, '5.9' );
+			if ( 'block_styles' === $types ) {
+				$types = array( 'styles', 'presets' );
+			} elseif ( 'css_variables' === $types ) {
+				$types = array( 'variables' );
+			} else {
+				$types = array( 'variables', 'styles', 'presets' );
+			}
+		}
+
+		$blocks_metadata = static::get_blocks_metadata();
+		$style_nodes     = static::get_style_nodes( $this->theme_json, $blocks_metadata );
+		$setting_nodes   = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
+
+		$stylesheet = '';
+
+		if ( in_array( 'variables', $types, true ) ) {
+			$stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
+		}
+
+		if ( in_array( 'styles', $types, true ) ) {
+			var_dump('styles');
+			$stylesheet .= $this->get_block_classes( $style_nodes );
+		}
+
+		if ( in_array( 'presets', $types, true ) ) {
+			$stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
+		}
+
+		return $stylesheet;
+	}
+
+	/**
+	 * Converts each style section into a list of rulesets
+	 * containing the block styles to be appended to the stylesheet.
+	 *
+	 * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
+	 *
+	 * For each section this creates a new ruleset such as:
+	 *
+	 *   block-selector {
+	 *     style-property-one: value;
+	 *   }
+	 *
+	 * @param array $style_nodes Nodes with styles.
+	 * @return string The new stylesheet.
+	 */
+	protected function get_block_classes( $style_nodes ) {
+		$block_rules = '';
+
+		foreach ( $style_nodes as $metadata ) {
+			if ( null === $metadata['selector'] ) {
+				continue;
+			}
+
+			$node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
+			$selector     = $metadata['selector'];
+			$settings     = _wp_array_get( $this->theme_json, array( 'settings' ) );
+			$declarations = static::compute_style_properties( $node, $settings );
+
+			// 1. Separate the ones who use the general selector
+			// and the ones who use the duotone selector.
+			$declarations_duotone = array();
+			foreach ( $declarations as $index => $declaration ) {
+				if ( 'filter' === $declaration['name'] ) {
+					unset( $declarations[ $index ] );
+					$declarations_duotone[] = $declaration;
+				}
+			}
+
+			/*
+			 * Reset default browser margin on the root body element.
+			 * This is set on the root selector **before** generating the ruleset
+			 * from the `theme.json`. This is to ensure that if the `theme.json` declares
+			 * `margin` in its `spacing` declaration for the `body` element then these
+			 * user-generated values take precedence in the CSS cascade.
+			 * @link https://github.com/WordPress/gutenberg/issues/36147.
+			 */
+			if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+				$block_rules .= 'body { margin: 0; }';
+			}
+
+			// 2. Generate the rules that use the general selector.
+			$block_rules .= static::to_ruleset( $selector, $declarations );
+
+			// 3. Generate the rules that use the duotone selector.
+			if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
+				$selector_duotone = static::scope_selector( $metadata['selector'], $metadata['duotone'] );
+				$block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
+			}
+
+			if ( self::ROOT_BLOCK_SELECTOR === $selector ) {
+				$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-inline-end: 2em; }';
+				$block_rules .= '.wp-site-blocks > .alignright { float: right; margin-inline-start: 2em; }';
+				$block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-inline-start: auto; margin-inline-end: auto; }';
+
+				$has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
+				if ( $has_block_gap_support ) {
+					$block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+					$block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+				}
+			}
+		}
+
+		return $block_rules;
+	}
 }

lib/compat/wordpress-6.0/get-global-styles-and-settings.php

@@ -0,0 +1,84 @@
+<?php
+/**
+ * API to interact with global settings & styles.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'gutenberg_get_global_stylesheet' ) ) {
+	/**
+	 * Returns the stylesheet resulting of merging core, theme, and user data.
+	 *
+	 * @param array $types Types of styles to load. Optional.
+	 *                     It accepts 'variables', 'styles', 'presets' as values.
+	 *                     If empty, it'll load all for themes with theme.json support
+	 *                     and only [ 'variables', 'presets' ] for themes without theme.json support.
+	 *
+	 * @return string Stylesheet.
+	 */
+	function gutenberg_get_global_stylesheet( $types = array() ) {
+		// Return cached value if it can be used and exists.
+		// It's cached by theme to make sure that theme switching clears the cache.
+		$can_use_cached = (
+			( empty( $types ) ) &&
+			( ! defined( 'WP_DEBUG' ) || ! WP_DEBUG ) &&
+			( ! defined( 'SCRIPT_DEBUG' ) || ! SCRIPT_DEBUG ) &&
+			( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) &&
+			! is_admin()
+		);
+		$transient_name = 'gutenberg_global_styles_' . get_stylesheet();
+		if ( $can_use_cached ) {
+			$cached = get_transient( $transient_name );
+			if ( $cached ) {
+				return $cached;
+			}
+		}
+
+		$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
+
+		$supports_theme_json = WP_Theme_JSON_Resolver_Gutenberg::theme_has_support();
+		if ( empty( $types ) && ! $supports_theme_json ) {
+			$types = array( 'variables', 'presets' );
+		} elseif ( empty( $types ) ) {
+			$types = array( 'variables', 'styles', 'presets' );
+		}
+
+		/*
+		 * If variables are part of the stylesheet,
+		 * we add them for all origins (default, theme, user).
+		 * This is so themes without a theme.json still work as before 5.9:
+		 * they can override the default presets.
+		 * See https://core.trac.wordpress.org/ticket/54782
+		 */
+		$styles_variables = '';
+		if ( in_array( 'variables', $types, true ) ) {
+			$styles_variables = $tree->get_stylesheet( array( 'variables' ) );
+			$types            = array_diff( $types, array( 'variables' ) );
+		}
+
+		/*
+		 * For the remaining types (presets, styles), we do consider origins:
+		 *
+		 * - themes without theme.json: only the classes for the presets defined by core
+		 * - themes with theme.json: the presets and styles classes, both from core and the theme
+		 */
+		$styles_rest = '';
+		if ( ! empty( $types ) ) {
+			$origins = array( 'default', 'theme', 'custom' );
+			if ( ! $supports_theme_json ) {
+				$origins = array( 'default' );
+			}
+			$styles_rest = $tree->get_stylesheet( $types, $origins );
+		}
+
+		$stylesheet = $styles_variables . $styles_rest;
+
+		if ( $can_use_cached ) {
+			// Cache for a minute.
+			// This cache doesn't need to be any longer, we only want to avoid spikes on high-traffic sites.
+			set_transient( $transient_name, $stylesheet, MINUTE_IN_SECONDS );
+		}
+
+		return $stylesheet;
+	}
+}

lib/load.php

@@ -96,6 +96,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-5.9/class-wp-rest-global-styles-controller.php';
 require __DIR__ . '/compat/wordpress-5.9/rest-active-global-styles.php';
 require __DIR__ . '/compat/wordpress-5.9/move-theme-editor-menu-item.php';
+require __DIR__ . '/compat/wordpress-6.0/get-global-styles-and-settings.php';
 require __DIR__ . '/compat/wordpress-6.0/post-lock.php';
 require __DIR__ . '/compat/wordpress-6.0/blocks.php';
 require __DIR__ . '/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php';

packages/block-editor/src/layouts/flow.js

@@ -120,11 +120,9 @@ export default {
 						margin-inline-start: auto !important;
 						margin-inline-end: auto !important;
 					}
-
 					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
-
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;
 					}
@@ -134,16 +132,14 @@ export default {
 		output += `
 			${ appendSelectors( selector, '> .alignleft' ) } {
 				float: left;
-				margin-inline-end: 2em;
 				margin-inline-start: 0;
+				margin-inline-end: 2em;
 			}
-
 			${ appendSelectors( selector, '> .alignright' ) } {
 				float: right;
 				margin-inline-start: 2em;
 				margin-inline-end: 0;
 			}
-
 		`;
 
 		if ( hasBlockGapStylesSupport ) {