Skip to content

'align' support flag - add server side block support for block alignment. #24122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Addison-Stavlo merged 4 commits into from
Jul 27, 2020
+91 −6
Merged

'align' support flag - add server side block support for block alignment. #24122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f3012a
add function for blockAlign
Addison-Stavlo Jul 22, 2020
be4ca26
minor comment tweak
Addison-Stavlo Jul 22, 2020
191631b
add wrapper for template part block on front end
Addison-Stavlo Jul 22, 2020
64a6035
update tests
Addison-Stavlo Jul 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 27 additions & 4 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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;
}
1 change: 1 addition & 0 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/template-part/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ function render_block_core_template_part( $attributes ) {
}
$content = do_shortcode( $content );

return str_replace( ']]>', ']]>', $content );
return '<div class="wp-block-template-part">' . str_replace( ']]>', ']]&gt;', $content ) . '</div>';
}

/**
Expand Down
63 changes: 62 additions & 1 deletion phpunit/class-block-supported-styles-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -472,6 +528,7 @@ function test_all_supported() {
),
'__experimentalFontSize' => true,
'__experimentalLineHeight' => true,
'align' => true,
),
'render_callback' => true,
);
Expand All @@ -480,6 +537,7 @@ function test_all_supported() {
$block = array(
'blockName' => 'core/example',
'attrs' => array(
'align' => 'wide',
'style' => array(
'color' => array(
'text' => '#000',
Expand All @@ -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 );
Expand All @@ -521,6 +579,7 @@ function test_one_supported() {
$block = array(
'blockName' => 'core/example',
'attrs' => array(
'align' => 'wide',
'style' => array(
'color' => array(
'text' => '#000',
Expand Down Expand Up @@ -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,
Expand All @@ -566,6 +626,7 @@ function test_render_callback_required() {
'blockName' => 'core/example',
'attrs' => array(
'style' => array(
'align' => 'wide',
'color' => array(
'text' => '#000',
'background' => '#fff',
Expand Down