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.

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

Jump to bottom

Columns block: Add stack on mobile setting to allow for columns without mobile breakpoints #31816

Merged
merged 4 commits into from
Jul 7, 2021
Merged

Columns block: Add stack on mobile setting to allow for columns without mobile breakpoints #31816

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
8044880
Columns block: Add stack on mobile setting
andrewserong May 14, 2021
faa4870
Update selector to specify the direct child
andrewserong May 14, 2021
b226d91
Fix deprecations to include the new attribute, add another set of tes…
andrewserong May 17, 2021
2076c72
Add nowrap to is-not-stacked-on-mobile
andrewserong May 19, 2021
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
4 changes: 4 additions & 0 deletions packages/block-library/src/columns/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
"attributes": {
"verticalAlignment": {
"type": "string"
},
"isStackedOnMobile": {
"type": "boolean",
"default": true
}
},
"supports": {
Expand Down
14 changes: 12 additions & 2 deletions packages/block-library/src/columns/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const migrateCustomColors = ( attributes ) => {
return {
...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
style,
isStackedOnMobile: true,
};
};

Expand Down Expand Up @@ -166,7 +167,13 @@ export default [
createBlock( 'core/column', {}, columnBlocks )
);

return [ omit( attributes, [ 'columns' ] ), migratedInnerBlocks ];
return [
{
...omit( attributes, [ 'columns' ] ),
isStackedOnMobile: true,
},
migratedInnerBlocks,
];
},
save( { attributes } ) {
const { columns } = attributes;
Expand All @@ -186,7 +193,10 @@ export default [
},
},
migrate( attributes, innerBlocks ) {
attributes = omit( attributes, [ 'columns' ] );
attributes = {
...omit( attributes, [ 'columns' ] ),
isStackedOnMobile: true,
};

return [ attributes, innerBlocks ];
},
Expand Down
20 changes: 18 additions & 2 deletions packages/block-library/src/columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import { dropRight, get, times } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { PanelBody, RangeControl, Notice } from '@wordpress/components';
import {
Notice,
PanelBody,
RangeControl,
ToggleControl,
} from '@wordpress/components';

import {
InspectorControls,
Expand Down Expand Up @@ -49,11 +54,12 @@ const ALLOWED_BLOCKS = [ 'core/column' ];

function ColumnsEditContainer( {
attributes,
setAttributes,
updateAlignment,
updateColumns,
clientId,
} ) {
const { verticalAlignment } = attributes;
const { isStackedOnMobile, verticalAlignment } = attributes;

const { count } = useSelect(
( select ) => {
Expand All @@ -66,6 +72,7 @@ function ColumnsEditContainer( {

const classes = classnames( {
[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
} );

const blockProps = useBlockProps( {
Expand Down Expand Up @@ -101,6 +108,15 @@ function ColumnsEditContainer( {
) }
</Notice>
) }
<ToggleControl
label={ __( 'Stack on mobile' ) }
checked={ isStackedOnMobile }
onChange={ () =>
setAttributes( {
isStackedOnMobile: ! isStackedOnMobile,
} )
}
/>
</PanelBody>
</InspectorControls>
<div { ...innerBlocksProps } />
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/columns/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,11 @@ import classnames from 'classnames';
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

export default function save( { attributes } ) {
const { verticalAlignment } = attributes;
const { isStackedOnMobile, verticalAlignment } = attributes;

const className = classnames( {
[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
} );

return (
Expand Down
119 changes: 71 additions & 48 deletions packages/block-library/src/columns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,66 +28,89 @@
&.are-vertically-aligned-bottom {
align-items: flex-end;
}

&:not(.is-not-stacked-on-mobile) > .wp-block-column {
Copy link
Member

Choose a reason for hiding this comment

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

What is the benefit of moving these rules inside &:not(.is-not-stacked-on-mobile) > .wp-block-column?
These previously were on .wp-block-column directly, and it was a lot cleaner. I haven't checked, but would it not be simpler to have these in .wp-block-column like before, and then simply override these rules where necessary in &.is-not-stacked-on-mobile?
Is there a reason I'm missing for the added complexity?

Copy link
Contributor

@kjellr kjellr Jul 6, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

The main benefit is that using the :not() rules avoids duplicate code. There are also some !important rules here, so we'd need to override those with more !important rules. 😅

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, it's an awkward rule, but results in fewer lines of CSS, while preserving the existing styling / similar specificity. I couldn't quite come up with a neat way to handle it otherwise, so it was a bit of a trade-off! 😅

@media (max-width: #{ ($break-small - 1) }) {
// Responsiveness: Show at most one columns on mobile. This must be
// important since the Column assigns its own width as an inline style.
flex-basis: 100% !important;
}

// Between mobile and large viewports, allow 2 columns.
@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
// Only add two column styling if there are two or more columns
&:not(:only-child) {
// 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`.
flex-basis: calc(50% - 1em) !important;
flex-grow: 0;
}

// Add space between the multiple columns. Themes can customize this if they wish to work differently.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
&:nth-child(even) {
margin-left: 2em;
}
}

// At large viewports, show all columns horizontally.
@include break-medium() {
// Available space should be divided equally amongst columns without an
// assigned width. This is achieved by assigning a flex basis that is
// consistent (equal), would not cause the sum total of column widths to
// exceed 100%, and which would cede to a column with an assigned width.
// The `flex-grow` allows columns to maximally and equally occupy space
// remaining after subtracting the space occupied by columns with
// explicit widths (if any exist).
flex-basis: 0;
flex-grow: 1;

// Columns with an explicitly-assigned width should maintain their
// `flex-basis` width and not grow.
&[style*="flex-basis"] {
flex-grow: 0;
}

// When columns are in a single row, add space before all except the first.
&:not(:first-child) {
margin-left: 2em;
}
}
}

&.is-not-stacked-on-mobile {
flex-wrap: nowrap;

> .wp-block-column {
// Available space should be divided equally amongst columns.
flex-basis: 0;
flex-grow: 1;

// Columns with an explicitly-assigned width should maintain their
// `flex-basis` width and not grow.
&[style*="flex-basis"] {
flex-grow: 0;
}

// When columns are in a single row, add space before all except the first.
&:not(:first-child) {
margin-left: 2em;
}
}
}
}

.wp-block-column {
flex-grow: 1;

@media (max-width: #{ ($break-small - 1) }) {
// Responsiveness: Show at most one columns on mobile. This must be
// important since the Column assigns its own width as an inline style.
flex-basis: 100% !important;
}

// Prevent the columns from growing wider than their distributed sizes.
min-width: 0;

// Prevent long unbroken words from overflowing.
word-break: break-word; // For back-compat.
overflow-wrap: break-word; // New standard.

// Between mobile and large viewports, allow 2 columns.
@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
// Only add two column styling if there are two or more columns
&:not(:only-child) {
// 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`.
flex-basis: calc(50% - 1em) !important;
flex-grow: 0;
}

// Add space between the multiple columns. Themes can customize this if they wish to work differently.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
&:nth-child(even) {
margin-left: 2em;
}
}

// At large viewports, show all columns horizontally.
@include break-medium() {
// Available space should be divided equally amongst columns without an
// assigned width. This is achieved by assigning a flex basis that is
// consistent (equal), would not cause the sum total of column widths to
// exceed 100%, and which would cede to a column with an assigned width.
// The `flex-grow` allows columns to maximally and equally occupy space
// remaining after subtracting the space occupied by columns with
// explicit widths (if any exist).
flex-basis: 0;
flex-grow: 1;

// Columns with an explicitly-assigned width should maintain their
// `flex-basis` width and not grow.
&[style*="flex-basis"] {
flex-grow: 0;
}

// When columns are in a single row, add space before all except the first.
&:not(:first-child) {
margin-left: 2em;
}
}

/**
* Individual Column Alignment
*/
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/fixtures/blocks/core__columns.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"name": "core/columns",
"isValid": true,
"attributes": {
"isStackedOnMobile": true,
"backgroundColor": "secondary"
},
"innerBlocks": [
Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"clientId": "_clientId_0",
"name": "core/columns",
"isValid": true,
"attributes": {},
"attributes": {
"isStackedOnMobile": true
},
"innerBlocks": [
{
"clientId": "_clientId_0",
Expand Down
24 changes: 24 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!-- wp:columns {"isStackedOnMobile":false,"backgroundColor":"secondary"} -->
<div class="wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Column One, Paragraph One</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Column One, Paragraph Two</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Column Two, Paragraph One</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Column Three, Paragraph One</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
76 changes: 76 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__columns__is-not-stacked-on-mobile.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
[
{
"clientId": "_clientId_0",
"name": "core/columns",
"isValid": true,
"attributes": {
"isStackedOnMobile": false,
"backgroundColor": "secondary"
},
"innerBlocks": [
{
"clientId": "_clientId_0",
"name": "core/column",
"isValid": true,
"attributes": {},
"innerBlocks": [
{
"clientId": "_clientId_0",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "Column One, Paragraph One",
"dropCap": false
},
"innerBlocks": [],
"originalContent": "<p>Column One, Paragraph One</p>"
},
{
"clientId": "_clientId_1",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "Column One, Paragraph Two",
"dropCap": false
},
"innerBlocks": [],
"originalContent": "<p>Column One, Paragraph Two</p>"
}
],
"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
},
{
"clientId": "_clientId_1",
"name": "core/column",
"isValid": true,
"attributes": {},
"innerBlocks": [
{
"clientId": "_clientId_0",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "Column Two, Paragraph One",
"dropCap": false
},
"innerBlocks": [],
"originalContent": "<p>Column Two, Paragraph One</p>"
},
{
"clientId": "_clientId_1",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "Column Three, Paragraph One",
"dropCap": false
},
"innerBlocks": [],
"originalContent": "<p>Column Three, Paragraph One</p>"
}
],
"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
}
],
"originalContent": "<div class=\"wp-block-columns is-not-stacked-on-mobile has-secondary-background-color has-background\">\n\t\n\t\n</div>"
}
]
Loading