diff --git a/lib/blocks.php b/lib/blocks.php index b9bf822ea318d9..737ecae100a8bd 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -237,12 +237,14 @@ function gutenberg_experimental_apply_classnames_and_styles( $block_content, $bl if ( ! $block_type || ! $block_type->render_callback ) { return $block_content; } + // Check what style features the block supports. $supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports ); $attributes = array(); $attributes = gutenberg_experimental_build_css_colors( $attributes, $block['attrs'], $supports ); $attributes = gutenberg_experimental_build_css_typography( $attributes, $block['attrs'], $supports ); + $attributes = gutenberg_build_css_block_alignment( $attributes, $block['attrs'], $supports ); if ( ! count( $attributes ) ) { return $block_content; @@ -290,8 +292,8 @@ function gutenberg_experimental_apply_classnames_and_styles( $block_content, $bl add_filter( 'render_block', 'gutenberg_experimental_apply_classnames_and_styles', 10, 2 ); /** - * Build an array with CSS classes and inline styles defining the colors - * which will be applied to the block markup in the front-end. + * Add CSS classes and inline styles for colors to the incoming attributes array. + * This will be applied to the block markup in the front-end. * * @param array $attributes comprehensive list of attributes to be applied. * @param array $block_attributes block attributes. @@ -372,8 +374,8 @@ function gutenberg_experimental_build_css_colors( $attributes, $block_attributes } /** - * Build an array with CSS classes and inline styles defining the font sizes - * which will be applied to the block markup in the front-end. + * Add CSS classes and inline styles for font sizes to the incoming attributes array. + * This will be applied to the block markup in the front-end. * * @param array $attributes comprehensive list of attributes to be applied. * @param array $block_attributes block attributes. @@ -405,3 +407,24 @@ function gutenberg_experimental_build_css_typography( $attributes, $block_attrib return $attributes; } + +/** + * Add CSS classes for block alignment to the incoming attributes array. + * This will be applied to the block markup in the front-end. + * + * @param array $attributes comprehensive list of attributes to be applied. + * @param array $block_attributes block attributes. + * @param array $supports style features the block attributes. + * @return array Block alignment CSS classes and inline styles. + */ +function gutenberg_build_css_block_alignment( $attributes, $block_attributes, $supports ) { + if ( in_array( 'block-align', $supports, true ) ) { + $has_block_alignment = array_key_exists( 'align', $block_attributes ); + + if ( $has_block_alignment ) { + $attributes['css_classes'][] = sprintf( 'align%s', $block_attributes['align'] ); + } + } + + return $attributes; +} diff --git a/lib/global-styles.php b/lib/global-styles.php index 0971f3d8538687..2c3eddda4eb1b0 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -276,6 +276,7 @@ function gutenberg_experimental_global_styles_get_supported_styles( $supports ) 'link-color' => array( '__experimentalColor', 'linkColor' ), 'line-height' => array( '__experimentalLineHeight' ), 'font-size' => array( '__experimentalFontSize' ), + 'block-align' => array( 'align' ), ); $supported_features = array(); diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php index de8de1212ca1fe..82ba837fc4594e 100644 --- a/packages/block-library/src/template-part/index.php +++ b/packages/block-library/src/template-part/index.php @@ -63,7 +63,7 @@ function render_block_core_template_part( $attributes ) { } $content = do_shortcode( $content ); - return str_replace( ']]>', ']]>', $content ); + return '
' . str_replace( ']]>', ']]>', $content ) . '
'; } /** diff --git a/phpunit/class-block-supported-styles-test.php b/phpunit/class-block-supported-styles-test.php index 0399944bb84d79..c4596be98e9ca1 100644 --- a/phpunit/class-block-supported-styles-test.php +++ b/phpunit/class-block-supported-styles-test.php @@ -459,6 +459,62 @@ function test_line_height_unsupported() { $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); } + /** + * Tests support for block alignment. + */ + function test_block_alignment() { + $block_type_settings = array( + 'attributes' => array(), + 'supports' => array( + 'align' => true, + ), + 'render_callback' => true, + ); + $this->register_block_type( 'core/example', $block_type_settings ); + + $block = array( + 'blockName' => 'core/example', + 'attrs' => array( + 'align' => 'wide', + ), + 'innerBlock' => array(), + 'innerContent' => array(), + 'innerHTML' => array(), + ); + + $expected_classes = 'wp-block-example foo-bar-class alignwide'; + $expected_styles = 'test:style; '; + + $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + } + + /** + * Tests block alignment requires support to be added. + */ + function test_block_alignment_unsupported() { + $block_type_settings = array( + 'attributes' => array(), + 'supports' => array(), + 'render_callback' => true, + ); + $this->register_block_type( 'core/example', $block_type_settings ); + + $block = array( + 'blockName' => 'core/example', + 'attrs' => array( + 'align' => 'wide', + ), + 'innerBlock' => array(), + 'innerContent' => array(), + 'innerHTML' => array(), + ); + + $expected_classes = 'wp-block-example foo-bar-class'; + $expected_styles = 'test:style;'; + + $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); + } + /** * Tests all support flags together to ensure they work together as expected. */ @@ -472,6 +528,7 @@ function test_all_supported() { ), '__experimentalFontSize' => true, '__experimentalLineHeight' => true, + 'align' => true, ), 'render_callback' => true, ); @@ -480,6 +537,7 @@ function test_all_supported() { $block = array( 'blockName' => 'core/example', 'attrs' => array( + 'align' => 'wide', 'style' => array( 'color' => array( 'text' => '#000', @@ -498,7 +556,7 @@ function test_all_supported() { 'innerHTML' => array(), ); - $expected_classes = 'wp-block-example foo-bar-class has-text-color has-background'; + $expected_classes = 'wp-block-example foo-bar-class has-text-color has-background alignwide'; $expected_styles = 'test:style; color: #000; background-color: #fff; background: some-gradient; font-size: 10px; line-height: 20;'; $this->assert_styles_and_classes_match( $block, $expected_classes, $expected_styles ); @@ -521,6 +579,7 @@ function test_one_supported() { $block = array( 'blockName' => 'core/example', 'attrs' => array( + 'align' => 'wide', 'style' => array( 'color' => array( 'text' => '#000', @@ -552,6 +611,7 @@ function test_render_callback_required() { $block_type_settings = array( 'attributes' => array(), 'supports' => array( + 'align' => true, '__experimentalColor' => array( 'gradients' => true, 'linkColor' => true, @@ -566,6 +626,7 @@ function test_render_callback_required() { 'blockName' => 'core/example', 'attrs' => array( 'style' => array( + 'align' => 'wide', 'color' => array( 'text' => '#000', 'background' => '#fff',