Skip to content

Commit

Permalink
Testing out an approach similar to the gallery block #38164
Browse files Browse the repository at this point in the history
  • Loading branch information
ramonjd committed May 20, 2022
1 parent 4d31d5e commit 5639a51
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 4 deletions.
2 changes: 1 addition & 1 deletion lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ function gutenberg_reregister_core_block_types() {
'freeform',
'code',
'column',
'columns',
'comments',
'group',
'heading',
Expand Down Expand Up @@ -51,6 +50,7 @@ function gutenberg_reregister_core_block_types() {
'calendar.php' => 'core/calendar',
'categories.php' => 'core/categories',
'cover.php' => 'core/cover',
'columns.php' => 'core/columns',
'comment-author-avatar.php' => 'core/comment-author-avatar',
'comment-author-name.php' => 'core/comment-author-name',
'comment-content.php' => 'core/comment-content',
Expand Down
8 changes: 8 additions & 0 deletions packages/block-library/src/columns/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
createBlocksFromInnerBlocksTemplate,
store as blocksStore,
} from '@wordpress/blocks';
import { Platform } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -40,6 +41,7 @@ import {
getRedistributedColumnWidths,
toWidthPrecision,
} from './utils';
import GapStyles from './gap-styles';

/**
* Allowed blocks constant is passed to InnerBlocks precisely as specified here.
Expand Down Expand Up @@ -92,6 +94,12 @@ function ColumnsEditContainer( {
value={ verticalAlignment }
/>
</BlockControls>
{ Platform.isWeb && (
<GapStyles
blockGap={ attributes.style?.spacing?.blockGap }
clientId={ clientId }
/>
) }
<InspectorControls>
<PanelBody>
<RangeControl
Expand Down
32 changes: 32 additions & 0 deletions packages/block-library/src/columns/gap-styles.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* WordPress dependencies
*/
import { BlockList } from '@wordpress/block-editor';
import { useContext, createPortal } from '@wordpress/element';

export default function GapStyles( { blockGap, clientId } ) {
const styleElement = useContext( BlockList.__unstableElementContext );

if ( ! blockGap ) {
return null;
}

// Check for the possibility of split block gap values. See: https://github.com/WordPress/gutenberg/pull/37736.
const gapValue = typeof blockGap === 'string' ? blockGap : blockGap?.left;

if ( ! gapValue ) {
return null;
}

const gap = `#block-${ clientId } {
--wp--style--unstable-columns-gap: ${ gapValue };
}`;

const GapStyle = () => {
return <style>{ gap }</style>;
};

return gap && styleElement
? createPortal( <GapStyle />, styleElement )
: null;
}
73 changes: 73 additions & 0 deletions packages/block-library/src/columns/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<?php

/**
* Adds a style tag for the --wp--style--unstable-columns-gap var.
*
* The Columns block requires the block's spacing blockGap value in order to calculate the 2 column offset in tablet viewport.
*
* @param array $attributes Attributes of the block being rendered.
* @param string $content Content of the block being rendered.
* @return string The content of the block being rendered.
*/
function block_core_columns_render( $attributes, $content ) {
$gap_value = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ), null );

if ( ! $gap_value ) {
return $content;
}

// 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.
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
}
} else {
$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}

// The gap value can be a string value or a split top/left value. For the columns we want `left` which equates to gap-column.
// See: https://github.com/WordPress/gutenberg/pull/37736.
if ( is_array( $gap_value ) ) {
$gap_value = isset( $gap_value['left'] ) ? $gap_value['left'] : null;
}

if ( ! $gap_value ) {
return $content;
}

$class = wp_unique_id( 'wp-block-columns-' );
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . $class . ' ',
$content,
1
);

$style = '.' . $class . '{ --wp--style--unstable-columns-gap: ' . $gap_value . ';}';
// Ideally styles should be loaded in the head, but blocks may be parsed
// after that, so loading in the footer for now.
// See https://core.trac.wordpress.org/ticket/53494.
add_action(
'wp_footer',
function () use ( $style ) {
echo '<style> ' . $style . '</style>';
}
);
return $content;
}

/**
* Registers the `core/columns` block on server.
*/
function register_block_core_columns() {
register_block_type_from_metadata(
__DIR__ . '/columns',
array(
'render_callback' => 'block_core_columns_render',
)
);
}

add_action( 'init', 'register_block_core_columns' );
5 changes: 2 additions & 3 deletions packages/block-library/src/columns/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,8 @@
// As with mobile styles, this must be important since the Column
// assigns its own width as an inline style, which should take effect
// starting at `break-medium`.
// Note: if the columns block has a style.spacing.blockGap value of > var(--wp--style--block-gap, 2em) this effect will not show.
// What would make this particular definition more robust is if we could do the following dynamically: ( var(--wp--style--block-gap, 2em) + style.spacing.blockGap )
flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
// Note: to calculate the offset we have to add the root block gap value with any block support spacing value (stored in --wp--style--unstable-columns-gap).
flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) + var(--wp--style--unstable-columns-gap, 0em) / 2)) !important;
}
}

Expand Down

0 comments on commit 5639a51

Please sign in to comment.