From 99fe9554bcac09f8f1453b748e37b652c5eda171 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 4 Jun 2024 13:23:18 +0900 Subject: [PATCH 1/2] Increase CSS specificity of text alignment classes --- packages/block-library/src/common.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index c6327692ff02a..ff0e54b23dc88 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -32,16 +32,17 @@ } // Text alignments. -.has-text-align-center { +// Increase specificity so that styles applied via the global styles can be overridden in block instances. +:root .has-text-align-center { text-align: center; } -.has-text-align-left { +:root .has-text-align-left { /*rtl:ignore*/ text-align: left; } -.has-text-align-right { +:root .has-text-align-right { /*rtl:ignore*/ text-align: right; } From 3b093caee0b2c96f1365cb0889c51b38402fac33 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Thu, 20 Jun 2024 21:07:27 +0900 Subject: [PATCH 2/2] Try to inject text alignment styles after global styles --- lib/block-supports/typography.php | 21 +++++++++++++++++++ packages/block-library/src/common.scss | 16 -------------- .../style-engine/class-wp-style-engine.php | 6 ++++++ 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index fa2a7b81e94e2..7bb550a98288f 100644 --- 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 index ff0e54b23dc88..1ff28c820ec54 100644 --- 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 index 272c12705bf88..234f42bfd51a1 100644 --- 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',