Skip to content

Grid block refactor #105

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

Open
johngodley wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Grid block refactor #105

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0a7bcfc
Add vertical alignment to grid
johngodley Jun 23, 2020
63c698e
Use a wider length
johngodley Jun 25, 2020
4372c2b
Refactor grid to save settings in columns
johngodley Jun 25, 2020
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
Prev Previous commit
Refactor grid to save settings in columns 
Each column now stores the settings, not the parent container. This allows us to reduce the CSS size, and overall complexity
  • Loading branch information
@johngodley
johngodley committed Jun 25, 2020
commit 4372c2b0eab409a05d1a9abe4a7e20360a8298fe
6 changes: 3 additions & 3 deletions blocks/layout-grid/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,13 +228,13 @@

// Note we add the alignment on the parent block as the editor nesting means it's not possible to affect the grid
@for $x from 1 through 4 {
&.column#{ $x }-grid__valign-top [data-type="jetpack/layout-grid-column"].wp-block:nth-child(#{ $x }) {
&.grid-column-#{ $x }__valign-top [data-type="jetpack/layout-grid-column"].wp-block:nth-child(#{ $x }) {
align-self: flex-start;
}
&.column#{ $x }-grid__valign-center [data-type="jetpack/layout-grid-column"].wp-block:nth-child(#{ $x }) {
&.grid-column-#{ $x }__valign-center [data-type="jetpack/layout-grid-column"].wp-block:nth-child(#{ $x }) {
align-self: center;
}
&.column#{ $x }-grid__valign-bottom [data-type="jetpack/layout-grid-column"].wp-block:nth-child(#{ $x }) {
&.grid-column-#{ $x }__valign-bottom [data-type="jetpack/layout-grid-column"].wp-block:nth-child(#{ $x }) {
align-self: flex-end;
}
}
Expand Down
1,204 changes: 220 additions & 984 deletions blocks/layout-grid/front.css
View file
Open in desktop

Large diffs are not rendered by default.

117 changes: 40 additions & 77 deletions blocks/layout-grid/front.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

@import './constants.scss';


/**
* Responsive Grid Options
*/
Expand All @@ -14,92 +13,18 @@
.wp-block-jetpack-layout-grid {
display: grid;
grid-gap: $grid-gutter;
grid-template-columns: $grid-mobile;

// Grid rules.
// Mobile first.
@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-mobile-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-start: $i;
}
}
}

@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-mobile-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-end: span $i; // Set it to span $i columns, regardless of starting position.
}
}
}

@for $i from 1 through 4 {
@for $x from 1 through 4 {
&.column#{ $x }-mobile-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-row-start: $i;
}
}
}
// Default to mobile
grid-template-columns: $grid-mobile;

// Tablet grid rules.
@media (min-width: #{ ($break-small) }) {

grid-template-columns: $grid-tablet;

@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-tablet-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-start: $i;
}
}
}

@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-tablet-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-end: span $i; // Set it to span $i columns, regardless of starting position.
}
}
}

@for $i from 1 through 4 {
@for $x from 1 through 4 {
&.column#{ $x }-tablet-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-row-start: $i;
}
}
}
}


// Desktop grid rules.
@media (min-width: #{ ($break-xlarge) }) {
grid-template-columns: $grid-desktop;

@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-desktop-grid__start-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-start: $i;
}
}
}

@for $i from 1 through 12 {
@for $x from 1 through 4 {
&.column#{ $x }-desktop-grid__span-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-column-end: span $i; // Set it to span $i columns, regardless of starting position.
}
}
}

@for $i from 1 through 4 {
@for $x from 1 through 4 {
&.column#{ $x }-desktop-grid__row-#{ $i } > .wp-block-jetpack-layout-grid-column:nth-child(#{ $x }) {
grid-row-start: $i;
}
}
}
}

// Ensure long lines wrap in themes that don't already enforce this
Expand Down Expand Up @@ -131,3 +56,41 @@
}
}
}

.wp-block-jetpack-layout-grid-column {
@for $position from 1 through 12 {
&.grid-column-mobile__start-#{ $position } {
grid-column-start: $position;
}

&.grid-column-mobile__span-#{ $position } {
grid-column-end: span $position; // Set it to span $i columns, regardless of starting position.
}
}

// Tablet grid rules.
@media (min-width: #{ ($break-small) }) {
@for $position from 1 through 12 {
&.grid-column-tablet__start-#{ $position } {
grid-column-start: $position;
}

&.grid-column-tablet__span-#{ $position } {
grid-column-end: span $position; // Set it to span $i columns, regardless of starting position.
}
}
}

// Desktop grid rules.
@media (min-width: #{ ($break-xlarge) }) {
@for $position from 1 through 12 {
&.grid-column-desktop__start-#{ $position } {
grid-column-start: $position;
}

&.grid-column-desktop__span-#{ $position } {
grid-column-end: span $position; // Set it to span $i columns, regardless of starting position.
}
}
}
}
128 changes: 107 additions & 21 deletions blocks/layout-grid/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,70 @@
import { __ } from '@wordpress/i18n';
import { mobile, tablet, desktop } from '@wordpress/icons';

/**
* @callback GetColumn
* @param {Device} device - Device to change
* @param {number} column - Column to change
* @returns {Column}
*/

/**
* @callback ChangeColumnCallback
* @param {Device} device - Device to change
* @param {number} column - Column to change
* @param {Column} value - New column value
*/

/**
* @typedef Column
* @type
* @property {number} start - Column start, relative to the row
* @property {number} span - Column span
* @property {number} row - Column row
*/

/**
* @typedef ColumnAdjustment
* @type
* @property {number} [start] - Column start
* @property {number} [span] - Column span
* @property {number} [row] - Column row
* @property {number} column - Column being adjusted
*/

/**
* @typedef ColumnAttributes
* @type
* @property {number} startDesktop
* @property {number} spanDesktop
* @property {number} rowDesktop
* @property {number} startMobile
* @property {number} spanMobile
* @property {number} rowMobile
* @property {number} startTablet
* @property {number} spanTablet
* @property {number} rowTablet
*/

/**
* @typedef ColumnDescription
* @type
* @property {string} label - Column label
* @property {number} value - Number of columns
*/

/**
* @typedef {"Desktop" | "Mobile" | "Tablet"} Device
*/

/**
* @typedef DeviceBreakpoint
* @type
* @property {string} label - Device label
* @property {Device} value - ID for this device
* @property {ReactElement} icon - Icon for this device
*/

function getSpacingValues() {
return [
{ value: 'small', label: __( 'Small', 'layout-grid' ) },
Expand All @@ -14,15 +78,21 @@ function getSpacingValues() {
];
}

export const getPaddingValues = () => ( [
{ value: 'none', label: __( 'No padding', 'layout-grid' ) },
].concat( getSpacingValues() ) );
export const getPaddingValues = () =>
[ { value: 'none', label: __( 'No padding', 'layout-grid' ) } ].concat(
getSpacingValues()
);

export const getGutterValues = () => ( [
{ value: 'none', label: __( 'No gutter', 'layout-grid' ) },
].concat( getSpacingValues() ) );
export const getGutterValues = () =>
[ { value: 'none', label: __( 'No gutter', 'layout-grid' ) } ].concat(
getSpacingValues()
);

export const getColumns = () => ( [
/**
* Get column details
* @returns {ColumnDescription[]}
*/
export const getColumns = () => [
{
label: __( '1 column', 'layout-grid' ),
value: 1,
Expand All @@ -39,30 +109,46 @@ export const getColumns = () => ( [
label: __( '4 columns', 'layout-grid' ),
value: 4,
},
] );
];

/** @type {Device} */
export const DEVICE_DESKTOP = 'Desktop';

/** @type {Device} */
export const DEVICE_TABLET = 'Tablet';

/** @type {Device} */
export const DEVICE_MOBILE = 'Mobile';

export const getLayouts = () => ( [
{ value: DEVICE_DESKTOP, label: __( 'Desktop', 'layout-grid' ), icon: desktop },
{ value: DEVICE_TABLET, label: __( 'Tablet', 'layout-grid' ), icon: tablet },
{ value: DEVICE_MOBILE, label: __( 'Mobile', 'layout-grid' ), icon: mobile },
] );
/**
* Get all the device breakpoints
*
* @returns {DeviceBreakpoint[]}
*/
export const getLayouts = () => [
{
value: DEVICE_DESKTOP,
label: __( 'Desktop', 'layout-grid' ),
icon: desktop,
},
{
value: DEVICE_TABLET,
label: __( 'Tablet', 'layout-grid' ),
icon: tablet,
},
{
value: DEVICE_MOBILE,
label: __( 'Mobile', 'layout-grid' ),
icon: mobile,
},
];

/** @type {number} */
export const MAX_COLUMNS = 4;

/** @type {Device[]} */
export const DEVICE_BREAKPOINTS = [
DEVICE_DESKTOP,
DEVICE_TABLET,
DEVICE_MOBILE,
];

export function getSpanForDevice( column, device ) {
return `column${ column + 1 }${ device }Span`;
}

export function getOffsetForDevice( column, device ) {
return `column${ column + 1 }${ device }Offset`;
}
Loading