Try to inject text alignment styles after global styles

WordPress · Jun 20, 2024 · 3b093ca · 3b093ca
1 parent dd717b3
commit 3b093ca
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
@@ -608,6 +608,22 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
 	return $preset['size'];
 }
 
+function gutenberg_output_typography_styles() {
+	foreach ( array( 'left', 'center', 'right' ) as $alignment ) {
+		gutenberg_style_engine_get_styles(
+			array(
+				'typography' => array(
+					'textAlign' => $alignment,
+				),
+			),
+			array(
+				'selector' => ".has-text-align-{$alignment}",
+				'context'  => 'block-supports',
+			)
+		);
+	}
+}
+
 // Register the block support.
 WP_Block_Supports::get_instance()->register(
 	'typography',
@@ -621,3 +637,8 @@ function gutenberg_get_typography_font_size_value( $preset, $settings = array()
 	remove_filter( 'render_block', 'wp_render_typography_support' );
 }
 add_filter( 'render_block', 'gutenberg_render_typography_support', 10, 2 );
+
+if ( function_exists( 'wp_output_typography_styles' ) ) {
+	remove_action( 'enqueue_block_assets', 'wp_output_typography_styles' );
+}
+add_filter( 'enqueue_block_assets', 'gutenberg_output_typography_styles', 9 );
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
@@ -31,22 +31,6 @@
 	font-size: var(--wp--preset--font-size--huge);
 }
 
-// Text alignments.
-// Increase specificity so that styles applied via the global styles can be overridden in block instances.
-:root .has-text-align-center {
-	text-align: center;
-}
-
-:root .has-text-align-left {
-	/*rtl:ignore*/
-	text-align: left;
-}
-
-:root .has-text-align-right {
-	/*rtl:ignore*/
-	text-align: right;
-}
-
 // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
 #end-resizable-editor-section {
 	display: none;

diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -267,6 +267,12 @@ final class WP_Style_Engine {
 					),
 					'path'          => array( 'typography', 'lineHeight' ),
 				),
+				'textAlign'       => array(
+					'property_keys' => array(
+						'default' => 'text-align',
+					),
+					'path'          => array( 'typography', 'textAlign' ),
+				),
 				'textColumns'    => array(
 					'property_keys' => array(
 						'default' => 'column-count',