diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index fa2a7b81e94e21..7bb550a98288f6 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 ff0e54b23dc88c..1ff28c820ec54b 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 272c12705bf880..234f42bfd51a1c 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',