Open dashkevych opened 3 years ago
@dashkevych this is a very good optimization request. I think that should be revised urgently, because the correct breaking of many columns does not work for smaller screens.
This is a pretty tricky topic...
In the example above anything above 3 columns IMO doesn't look good. But that's a combination of too many factors!
If columns didn't have a padding (or if the theme just defined a small padding) then 4 columns would probably be acceptable to me too.
If the font-size was 10px, then 5 columns would be acceptable too.
You could for example in your theme do something like .wp-block-column{min-width:12em}
, in which case columns would have a minimum width of 12 characters and they would then collapse to a line below.
Or you could get fancier and convert columns from flex
to grid
with something like this:
/**
* Filters the content of a single block.
*
* Takes care of the "grid-template-columns" property for columns
* so we can properly use a css-grid layout instead of css-flexbox.
*
* @access public
* @param string $block_content The block content about to be appended.
* @param array $block The full block, including name and attributes.
* @return string Returns $block_content with our modifications.
*/
function aristath_convert_columns_to_grid( $block_content, $block ) {
if ( 'core/columns' === $block['blockName'] ) {
$grid_template_columns = [];
$min_column_width = '7em';
foreach ( $block['innerBlocks'] as $column ) {
$column_width = "minmax({$min_column_width}, 1fr)";
if ( isset( $column['attrs'] ) && isset( $column['attrs']['width'] ) ) {
$column_width = "minmax({$min_column_width}, {$column['attrs']['width']})";
if ( is_numeric( $column['attrs']['width'] ) ) {
$column_width = "minmax({$min_column_width}, {$column['attrs']['width']}fr)";
}
}
$grid_template_columns[] = $column_width;
}
$style = 'grid-template-columns:' . implode( ' ', $grid_template_columns ) . ';';
// If all columns are equal, use "repeat".
if ( 1 === count( array_unique( $grid_template_columns ) ) ) {
$style = "grid-template-columns: repeat(auto-fill, {$grid_template_columns[0]});";
}
$block_content = str_replace(
'class="wp-block-columns',
'style="' . $style . '" class="wp-block-columns',
$block_content
);
}
return $block_content;
}
add_filter( 'render_block', 'aristath_convert_columns_to_grid', 10, 2 );
but that would require more tweaks in the theme's styles to accommodate the new styles, remove margins and replace them with a grid-gap
, add display:grid
to .wp-block-columns
, and lots of other styles.
At the end of the day, it all depends on your theme's styles... Gutenberg provides some sane defaults, but that's all. If a user adds 6 columns, then they are expected to add content in them that makes sense in 6 columns.
Building on @aristath's comment, I think the most reasonable solution here is going to be to allow for some sort of minmax()
values per column. Perhaps that'll be possible in tandem with the CSS grid work that is happening over in https://github.com/WordPress/gutenberg/pull/32137.
Hi, I just want to share my solutions about this issues.
Sometimes, UI that "scrolls horizontally on mobile" may be preferable to “stack on mobile”.
example: https://buildui.com/
Let me share my solution for using "Pricing Table".
https://wordpress.org/patterns/pattern/pricing-table/
Mobile | Tablet | Desktop |
Mobile | Tablet | Desktop |
317px
. (👈 This value will vary depending on your requirements but px
is recommended.)2. Add style.css
.wp-block-columns.is-not-stacked-on-mobile {
overflow-x: auto;
}
.wp-block-columns.is-not-stacked-on-mobile>.wp-block-column {
box-sizing: border-box; /* 👈 this is not necessary but it is easy to check width in chrome dev tools */
flex-shrink: 0;
}
Since the Columns block no longer provides a class with information about number of columns, I am wondering what would be a recommended way to control the Columns block with various number of columns in smaller screens.
The thing is that a grid with three, four, five or six columns might look good on large screens; however, on smaller screens the grid becomes unreadable.
Example
Here is an example of various grids on large screens:
If we view these Columns blocks on iPad PRO (12.9inch), we can see that some grids (with five and six, and even four columns) become unreadable due to a limited space inside the columns.
If we open the same layout even on a smaller screen, for example iPad PRO (10.5inch), the layout becomes worse:
Question
What is a recommended way to control the width of columns in a grid based on the number of columns in it and the screen resolution?