Skip to content

Commit

Permalink
Support custom block padding.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tellthemachines
tellthemachines committed Jul 5, 2022
1 parent 54c401b commit afbe6af
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 16 deletions.
24 changes: 17 additions & 7 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,11 @@ function gutenberg_register_layout_support( $block_type ) {
* @param string $gap_value The block gap value to apply.
* @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
* @param string $fallback_gap_value The block gap value to apply.
* @param array $block_padding Custom padding set on the block.
*
* @return string CSS style.
*/
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_padding = null ) {
$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';

$style = '';
Expand All @@ -64,6 +65,17 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
$style .= "$selector .alignfull { max-width: none; }";
}

// Handle negative margins for alignfull children of blocks with custom padding set.
// They're added separately because padding might only be set on one side.
if ( isset( $block_padding['right'] ) ) {
$padding_right = $block_padding['right'];
$style .= "$selector > .alignfull { margin-right: -$padding_right; }";
}
if ( isset( $block_padding['left'] ) ) {
$padding_left = $block_padding['left'];
$style .= "$selector > .alignfull { margin-left: -$padding_left; }";
}

if ( $has_block_gap_support ) {
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['top'] ) ? $gap_value['top'] : null;
Expand Down Expand Up @@ -173,12 +185,9 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
$block_classname = wp_get_block_default_classname( $block['blockName'] );
$container_class = wp_unique_id( 'wp-container-' );
$layout_classname = '';
$use_global_padding = isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] || isset( $used_layout['useGlobalPadding'] ) && $used_layout['useGlobalPadding'];

// Add a classname to blocks with flow layout set.
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] || isset( $used_layout['contentSize'] ) && $used_layout['contentSize'] ) {
$class_names[] = 'has-content-size';
// If no layout is set, check if the block uses root padding and set a classname accordingly.
} elseif ( isset( $used_layout['useGlobalPadding'] ) && $used_layout['useGlobalPadding'] ) {
if ( $use_global_padding ) {
$class_names[] = 'has-global-padding';
}

Expand Down Expand Up @@ -222,11 +231,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
}

$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
$block_padding = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'padding' ), null );

// 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( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
$style = gutenberg_get_layout_style( ".$block_classname.$container_class", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value, $block_padding );

// Only add container class and enqueue block support styles if unique styles were generated.
if ( ! empty( $style ) ) {
Expand Down
6 changes: 3 additions & 3 deletions lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -697,9 +697,9 @@ public function get_styles_for_block( $block_metadata ) {

if ( $use_root_vars ) {
$block_rules .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
$block_rules .= '.has-content-size, .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
$block_rules .= '.has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
$block_rules .= '.alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
$block_rules .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
$block_rules .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
$block_rules .= '.has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
}

$block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
Expand Down
16 changes: 11 additions & 5 deletions packages/block-editor/src/hooks/layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,7 @@ function getLayoutClasses( layout, layoutDefinitions ) {
);
}

if ( layout?.inherit || layout.contentSize ) {
layoutClassnames.push( 'has-content-size' );
} else if ( layout?.useGlobalPadding ) {
if ( layout?.inherit || layout?.contentSize || layout?.useGlobalPadding ) {
layoutClassnames.push( 'has-global-padding' );
}

Expand Down Expand Up @@ -115,7 +113,11 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
);

const usedLayout = layout || defaultBlockLayout || {};
const { inherit = false, type = 'default' } = usedLayout;
const {
inherit = false,
type = 'default',
useGlobalPadding = false,
} = usedLayout;
/**
* `themeSupportsLayout` is only relevant to the `default/flow`
* layout and it should not be taken into account when other
Expand All @@ -142,7 +144,11 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
checked={ ! inherit }
onChange={ () =>
setAttributes( {
layout: { inherit: ! inherit },
layout: {
inherit: ! inherit,
useGlobalPadding:
! inherit || useGlobalPadding,
},
} )
}
/>
Expand Down
19 changes: 19 additions & 0 deletions packages/block-editor/src/layouts/flow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default {
onChange( {
...layout,
contentSize: nextWidth,
useGlobalPadding: true,
} );
} }
units={ units }
Expand All @@ -73,6 +74,7 @@ export default {
onChange( {
...layout,
wideSize: nextWidth,
useGlobalPadding: true,
} );
} }
units={ units }
Expand All @@ -90,6 +92,7 @@ export default {
contentSize: undefined,
wideSize: undefined,
inherit: false,
useGlobalPadding: false,
} )
}
>
Expand Down Expand Up @@ -159,6 +162,22 @@ export default {
`
: '';

// If there is custom padding, add negative margins for alignfull blocks.
// They're added separately because padding might only be set on one side.
if ( style?.spacing?.padding?.right ) {
output += `
${ appendSelectors( selector, '> .alignfull' ) } {
margin-right: -${ style.spacing.padding.right };
}
`;
}
if ( style?.spacing?.padding?.left ) {
output += `
${ appendSelectors( selector, '> .alignfull' ) } {
margin-left: -${ style.spacing.padding.left };
}
`;
}
// Output blockGap styles based on rules contained in layout definitions in theme.json.
if ( hasBlockGapSupport && blockGapValue ) {
output += getBlockGapCSS(
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/use-global-styles-output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ export const toStyles = (

if ( useRootVars ) {
ruleset =
'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-content-size, .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-content-size > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
'body { margin: 0; padding-right: 0; padding-left: 0; padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom) } .has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); } .has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); } .has-global-padding > .alignfull > :where([class*="wp-block-"]:not(.alignfull),p,h1,h2,h3,h4,h5,h6, ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
}

nodesWithStyles.forEach(
Expand Down

0 comments on commit afbe6af

Please sign in to comment.