Skip to content
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.

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

Add utility classnames back to blocks that have layout attributes specified #41487

Merged
merged 7 commits into from
Jun 9, 2022
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
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
45 changes: 41 additions & 4 deletions lib/block-supports/layout.php
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,40 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
return $style;
}

/**
* Generates the utility classnames for the given blocks layout attributes.
* This method was primarily added to reintroduce classnames that were removed
* in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather
* than providing an extensive list of all possible layout classes. The plan is to
* have the style engine generate a more extensive list of utility classnames which
* will then replace this method.
*
* @param array $block_attributes Array of block attributes.
*
* @return array Array of CSS classname strings.
*/
function gutenberg_get_layout_classes( $block_attributes ) {
$class_names = array();

if ( empty( $block_attributes['layout'] ) ) {
return $class_names;
}

if ( ! empty( $block_attributes['layout']['orientation'] ) ) {
$class_names[] = 'is-' . sanitize_title( $block_attributes['layout']['orientation'] );
}

if ( ! empty( $block_attributes['layout']['justifyContent'] ) ) {
$class_names[] = 'is-content-justification-' . sanitize_title( $block_attributes['layout']['justifyContent'] );
}

if ( ! empty( $block_attributes['layout']['flexWrap'] ) && 'nowrap' === $block_attributes['layout']['flexWrap'] ) {
$class_names[] = 'is-nowrap';
}

return $class_names;
}

/**
* Renders the layout config to the block wrapper.
*
Expand Down Expand Up @@ -172,8 +206,11 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$used_layout = $default_layout;
}

$class_name = wp_unique_id( 'wp-container-' );
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
$container_class = wp_unique_id( 'wp-container-' );
$class_names = gutenberg_get_layout_classes( $block['attrs'] );
$class_names[] = $container_class;

$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
Expand All @@ -190,12 +227,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
$style = gutenberg_get_layout_style( ".$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . esc_attr( $class_name ) . ' ',
'class="' . esc_attr( implode( ' ', $class_names ) ) . ' ',
$block_content,
1
);
Expand Down
55 changes: 51 additions & 4 deletions packages/block-editor/src/hooks/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { has } from 'lodash';
import { has, kebabCase } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -32,6 +32,49 @@ import { getLayoutType, getLayoutTypes } from '../layouts';

const layoutBlockSupportKey = '__experimentalLayout';

/**
* Generates the utility classnames for the given blocks layout attributes.
* This method was primarily added to reintroduce classnames that were removed
* in the 5.9 release (https://github.com/WordPress/gutenberg/issues/38719), rather
* than providing an extensive list of all possible layout classes. The plan is to
* have the style engine generate a more extensive list of utility classnames which
* will then replace this method.
*
* @param { Array } attributes Array of block attributes.
*
* @return { Array } Array of CSS classname strings.
*/
function getLayoutClasses( attributes ) {
const layoutClassnames = [];

if ( ! attributes.layout ) {
return layoutClassnames;
}

if ( attributes?.layout?.orientation ) {
layoutClassnames.push(
`is-${ kebabCase( attributes.layout.orientation ) }`
);
}

if ( attributes?.layout?.justifyContent ) {
layoutClassnames.push(
`is-content-justification-${ kebabCase(
attributes.layout.justifyContent
) }`
);
}

if (
attributes?.layout?.flexWrap &&
attributes.layout.flexWrap === 'nowrap'
) {
layoutClassnames.push( 'is-nowrap' );
}

return layoutClassnames;
}

function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
const { layout } = attributes;
const defaultThemeLayout = useSetting( 'layout' );
Expand Down Expand Up @@ -212,9 +255,13 @@ export const withLayoutStyles = createHigherOrderComponent(
const usedLayout = layout?.inherit
? defaultThemeLayout
: layout || defaultBlockLayout || {};
const className = classnames( props?.className, {
[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
} );
const className = classnames(
props?.className,
{
[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
},
getLayoutClasses( attributes )
Copy link
Contributor

@andrewserong andrewserong Jun 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be slightly nit-picky, but in the PHP implementation, the classnames will only be added if the block has opted-in to the layout support. Theoretically in this JS version, it looks like if the attributes have a layout property (with the appropriate sub-properties), it'll output the classnames even if the block hasn't opted in to the layout support. I can only imagine this happening in an unfortunate edge case of a custom block in a plugin that happens to use a layout attribute.

Do you think it's worth adding a shouldRenderLayoutStyles check before calling getLayoutClasses?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks, will sort that out in the morning

);

return (
<>
Expand Down