diff --git a/.prettierrc.js b/.prettierrc.js index 51b8aeb4..c7229cb5 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,3 +1,6 @@ // Import the default config file and expose it in the project root. // Useful for editor integrations. -module.exports = require( '@wordpress/prettier-config' ); +module.exports = { + ...require( '@wordpress/prettier-config' ), + printWidth: 120, +}; diff --git a/blocks/layout-grid/editor.scss b/blocks/layout-grid/editor.scss index f55c9b97..5e6df18c 100644 --- a/blocks/layout-grid/editor.scss +++ b/blocks/layout-grid/editor.scss @@ -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; } } diff --git a/blocks/layout-grid/front.css b/blocks/layout-grid/front.css index afd6d1bc..59aed811 100644 --- a/blocks/layout-grid/front.css +++ b/blocks/layout-grid/front.css @@ -12,1034 +12,270 @@ grid-gap: 24px; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + @media (min-width: 600px) { + .wp-block-jetpack-layout-grid { + -ms-grid-columns: (1fr)[8]; + grid-template-columns: repeat(8, 1fr); } } + @media (min-width: 1080px) { + .wp-block-jetpack-layout-grid { + -ms-grid-columns: (1fr)[12]; + grid-template-columns: repeat(12, 1fr); } } + .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column * { + word-break: break-word; + word-wrap: break-word; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none { + grid-gap: 0px; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small { + grid-gap: 8px; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium { + grid-gap: 16px; } + .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge { + grid-gap: 48px; } + +@-moz-document url-prefix() { + .wp-block-jetpack-layout-grid .wp-block-cover { + max-height: 0; } } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-1 { + -ms-grid-column: 1; + grid-column-start: 1; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-1 { + -ms-grid-column-span: 1; + grid-column-end: span 1; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-2 { + -ms-grid-column: 2; + grid-column-start: 2; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-2 { + -ms-grid-column-span: 2; + grid-column-end: span 2; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-3 { + -ms-grid-column: 3; + grid-column-start: 3; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-3 { + -ms-grid-column-span: 3; + grid-column-end: span 3; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-4 { + -ms-grid-column: 4; + grid-column-start: 4; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-4 { + -ms-grid-column-span: 4; + grid-column-end: span 4; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-5 { + -ms-grid-column: 5; + grid-column-start: 5; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-5 { + -ms-grid-column-span: 5; + grid-column-end: span 5; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-6 { + -ms-grid-column: 6; + grid-column-start: 6; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-6 { + -ms-grid-column-span: 6; + grid-column-end: span 6; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-7 { + -ms-grid-column: 7; + grid-column-start: 7; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-7 { + -ms-grid-column-span: 7; + grid-column-end: span 7; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-8 { + -ms-grid-column: 8; + grid-column-start: 8; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-8 { + -ms-grid-column-span: 8; + grid-column-end: span 8; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-9 { + -ms-grid-column: 9; + grid-column-start: 9; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-9 { + -ms-grid-column-span: 9; + grid-column-end: span 9; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-10 { + -ms-grid-column: 10; + grid-column-start: 10; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-10 { + -ms-grid-column-span: 10; + grid-column-end: span 10; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-11 { + -ms-grid-column: 11; + grid-column-start: 11; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-11 { + -ms-grid-column-span: 11; + grid-column-end: span 11; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__start-12 { + -ms-grid-column: 12; + grid-column-start: 12; } + +.wp-block-jetpack-layout-grid-column.grid-column-mobile__span-12 { + -ms-grid-column-span: 12; + grid-column-end: span 12; } + +@media (min-width: 600px) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-1 { -ms-grid-column: 1; grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-1 { + -ms-grid-column-span: 1; + grid-column-end: span 1; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-2 { -ms-grid-column: 2; grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-2 { + -ms-grid-column-span: 2; + grid-column-end: span 2; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-3 { -ms-grid-column: 3; grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-3 { + -ms-grid-column-span: 3; + grid-column-end: span 3; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-4 { -ms-grid-column: 4; grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-4 { + -ms-grid-column-span: 4; + grid-column-end: span 4; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-5 { -ms-grid-column: 5; grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-5 { + -ms-grid-column-span: 5; + grid-column-end: span 5; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-6 { -ms-grid-column: 6; grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-6 { + -ms-grid-column-span: 6; + grid-column-end: span 6; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-7 { -ms-grid-column: 7; grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-7 { + -ms-grid-column-span: 7; + grid-column-end: span 7; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-8 { -ms-grid-column: 8; grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-8 { + -ms-grid-column-span: 8; + grid-column-end: span 8; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-9 { -ms-grid-column: 9; grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-9 { + -ms-grid-column-span: 9; + grid-column-end: span 9; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-10 { -ms-grid-column: 10; grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-10 { + -ms-grid-column-span: 10; + grid-column-end: span 10; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-11 { -ms-grid-column: 11; grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-11 { + -ms-grid-column-span: 11; + grid-column-end: span 11; } + .wp-block-jetpack-layout-grid-column.grid-column-tablet__start-12 { -ms-grid-column: 12; grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-tablet__span-12 { + -ms-grid-column-span: 12; + grid-column-end: span 12; } } + +@media (min-width: 1080px) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-1 { + -ms-grid-column: 1; + grid-column-start: 1; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-1 { -ms-grid-column-span: 1; grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-2 { + -ms-grid-column: 2; + grid-column-start: 2; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-2 { -ms-grid-column-span: 2; grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-3 { + -ms-grid-column: 3; + grid-column-start: 3; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-3 { -ms-grid-column-span: 3; grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-4 { + -ms-grid-column: 4; + grid-column-start: 4; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-4 { -ms-grid-column-span: 4; grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-5 { + -ms-grid-column: 5; + grid-column-start: 5; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-5 { -ms-grid-column-span: 5; grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-6 { + -ms-grid-column: 6; + grid-column-start: 6; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-6 { -ms-grid-column-span: 6; grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-7 { + -ms-grid-column: 7; + grid-column-start: 7; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-7 { -ms-grid-column-span: 7; grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-8 { + -ms-grid-column: 8; + grid-column-start: 8; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-8 { -ms-grid-column-span: 8; grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-9 { + -ms-grid-column: 9; + grid-column-start: 9; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-9 { -ms-grid-column-span: 9; grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-10 { + -ms-grid-column: 10; + grid-column-start: 10; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-10 { -ms-grid-column-span: 10; grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-11 { + -ms-grid-column: 11; + grid-column-start: 11; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-11 { -ms-grid-column-span: 11; grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { + .wp-block-jetpack-layout-grid-column.grid-column-desktop__start-12 { + -ms-grid-column: 12; + grid-column-start: 12; } + .wp-block-jetpack-layout-grid-column.grid-column-desktop__span-12 { -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column1-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column2-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column3-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column4-mobile-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 4; - grid-row-start: 4; } - @media (min-width: 600px) { - .wp-block-jetpack-layout-grid { - -ms-grid-columns: (1fr)[8]; - grid-template-columns: repeat(8, 1fr); } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column1-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column2-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column3-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column4-tablet-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 4; - grid-row-start: 4; } } - @media (min-width: 1080px) { - .wp-block-jetpack-layout-grid { - -ms-grid-columns: (1fr)[12]; - grid-template-columns: repeat(12, 1fr); } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 1; - grid-column-start: 1; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 2; - grid-column-start: 2; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 3; - grid-column-start: 3; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 4; - grid-column-start: 4; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 5; - grid-column-start: 5; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 6; - grid-column-start: 6; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 7; - grid-column-start: 7; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 8; - grid-column-start: 8; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 9; - grid-column-start: 9; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 10; - grid-column-start: 10; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 11; - grid-column-start: 11; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__start-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column: 12; - grid-column-start: 12; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 1; - grid-column-end: span 1; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 2; - grid-column-end: span 2; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 3; - grid-column-end: span 3; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 4; - grid-column-end: span 4; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-5 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 5; - grid-column-end: span 5; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-6 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 6; - grid-column-end: span 6; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-7 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 7; - grid-column-end: span 7; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-8 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 8; - grid-column-end: span 8; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-9 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 9; - grid-column-end: span 9; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-10 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 10; - grid-column-end: span 10; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-11 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 11; - grid-column-end: span 11; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__span-12 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-column-span: 12; - grid-column-end: span 12; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-1 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 1; - grid-row-start: 1; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-2 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 2; - grid-row-start: 2; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-3 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 3; - grid-row-start: 3; } - .wp-block-jetpack-layout-grid.column1-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(1) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column2-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(2) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column3-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(3) { - -ms-grid-row: 4; - grid-row-start: 4; } - .wp-block-jetpack-layout-grid.column4-desktop-grid__row-4 > .wp-block-jetpack-layout-grid-column:nth-child(4) { - -ms-grid-row: 4; - grid-row-start: 4; } } - .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column * { - word-break: break-word; - word-wrap: break-word; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none { - grid-gap: 0px; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__small { - grid-gap: 8px; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__medium { - grid-gap: 16px; } - .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__huge { - grid-gap: 48px; } - -@-moz-document url-prefix() { - .wp-block-jetpack-layout-grid .wp-block-cover { - max-height: 0; } } + grid-column-end: span 12; } } diff --git a/blocks/layout-grid/front.scss b/blocks/layout-grid/front.scss index 86676721..34b6471b 100644 --- a/blocks/layout-grid/front.scss +++ b/blocks/layout-grid/front.scss @@ -5,7 +5,6 @@ @import './constants.scss'; - /** * Responsive Grid Options */ @@ -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 @@ -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. + } + } + } +} diff --git a/blocks/layout-grid/src/constants.js b/blocks/layout-grid/src/constants.js index aa9aee1b..55a483fc 100644 --- a/blocks/layout-grid/src/constants.js +++ b/blocks/layout-grid/src/constants.js @@ -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' ) }, @@ -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, @@ -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`; -} diff --git a/blocks/layout-grid/src/grid-column/edit.js b/blocks/layout-grid/src/grid-column/edit.js index 1614b477..87a45888 100644 --- a/blocks/layout-grid/src/grid-column/edit.js +++ b/blocks/layout-grid/src/grid-column/edit.js @@ -1,9 +1,3 @@ -/** - * External dependencies - */ - -import classnames from 'classnames'; - /** * WordPress dependencies */ @@ -15,9 +9,10 @@ import { withColors, BlockControls, BlockVerticalAlignmentToolbar, + getColorClassName, } from '@wordpress/block-editor'; -import { Component } from '@wordpress/element'; import { compose } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; import { withSelect, withDispatch } from '@wordpress/data'; import { PanelBody, SelectControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -26,119 +21,100 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { getPaddingValues } from '../constants'; - -class Edit extends Component { - constructor( props ) { - super( props ); - - this.state = { direction: null }; - } - - onLeftIn = () => { - this.setState( { direction: 'left' } ); - document.addEventListener( 'mouseup', this.onLeftOut ); +import { getGridClasses, getBackgroundClasses, getColumnVerticalAlignClasses, getPaddingClasses } from '../grid-css'; + +function Edit( props ) { + const { + className, + hasChildBlocks, + backgroundColor, + setBackgroundColor, + attributes, + setAttributes, + updateAlignment, + } = props; + const { padding, verticalAlignment } = attributes; + const [ direction, setDirection ] = useState( null ); + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + const classes = getGridClasses( className, { + ...getBackgroundClasses( backgroundColor, backgroundClass ), + ...getColumnVerticalAlignClasses( verticalAlignment ), + ...getPaddingClasses( padding ), + + 'components-resizable-box__container': true, + 'wp-blocks-jetpack-layout-grid__showleft': direction === 'right', + 'wp-blocks-jetpack-layout-grid__showright': direction === 'left', + } ); + + + const style = { + backgroundColor: backgroundColor.color, + }; + + function changeDirectionEnd() { + setDirection( null ); + + document.removeEventListener( 'mouseup', changeDirectionEnd ); } - onLeftOut = () => { - this.setState( { direction: null } ); - document.removeEventListener( 'mouseup', this.onLeftOut ); - } - - onRightIn = () => { - this.setState( { direction: 'right' } ); - document.addEventListener( 'mouseup', this.onRightOut ); - } + function changeDirectionStart( direction ) { + setDirection( direction ); - onRightOut = () => { - this.setState( { direction: null } ); - document.removeEventListener( 'mouseup', this.onRightOut ); + document.addEventListener( 'mouseup', changeDirectionEnd ); } - render() { - const { - className, - hasChildBlocks, - backgroundColor, - setBackgroundColor, - attributes, - setAttributes, - updateAlignment, - } = this.props; - const { padding, verticalAlignment } = attributes; - const { direction } = this.state; - const classes = classnames( className, backgroundColor.class, { - [ 'wp-block-jetpack-layout-grid__padding-' + padding ]: true, - 'has-background': backgroundColor.color, - 'components-resizable-box__container': true, - [ backgroundColor.class ]: backgroundColor.class, - 'wp-blocks-jetpack-layout-grid__showleft': direction === 'right', - 'wp-blocks-jetpack-layout-grid__showright': direction === 'left', - [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); - const style = { - backgroundColor: backgroundColor.color, - }; - - // Note we wrap the InnerBlock with 'fake' resize handles. These are here so they always match the current column dimensions. Functionally - // they do nothing other than disappear when the mouse button is pressed. The real resizing happens in the ResizeGrid component. - // We identify the left and right handles by data-resize-left and data-resize-right - return ( -
- -
-
-
-
- - - - } + // Note we wrap the InnerBlock with 'fake' resize handles. These are here so they always match the current column dimensions. Functionally + // they do nothing other than disappear when the mouse button is pressed. The real resizing happens in the ResizeGrid component. + // We identify the left and right handles by data-resize-left and data-resize-right + // TODO: remove this data stuff and the DOM crawling + return ( +
+ +
changeDirectionStart( 'right' ) } + data-resize-right + >
+
changeDirectionStart( 'left' ) } + data-resize-left + >
+ + + } + /> + + + - - - - -

{ __( 'Choose padding for this column:', 'layout-grid' ) }

- setAttributes( { padding: newValue } ) } - options={ getPaddingValues() } - /> - - - - - +

{ __( 'Choose padding for this column:', 'layout-grid' ) }

+ setAttributes( { padding: newValue } ) } + options={ getPaddingValues() } /> - -
- ); - } + + + + + + +
+ ); } export default compose( @@ -155,12 +131,8 @@ export default compose( return { updateAlignment( verticalAlignment ) { const { clientId, setAttributes } = ownProps; - const { updateBlockAttributes } = dispatch( - 'core/block-editor' - ); - const { getBlockRootClientId } = registry.select( - 'core/block-editor' - ); + const { updateBlockAttributes } = dispatch( 'core/block-editor' ); + const { getBlockRootClientId } = registry.select( 'core/block-editor' ); // Update own alignment. setAttributes( { verticalAlignment } ); diff --git a/blocks/layout-grid/src/grid-column/save.js b/blocks/layout-grid/src/grid-column/save.js index ec518c26..7addf95f 100644 --- a/blocks/layout-grid/src/grid-column/save.js +++ b/blocks/layout-grid/src/grid-column/save.js @@ -1,29 +1,24 @@ -/** - * External dependencies - */ - -import classnames from 'classnames'; - /** * Internal dependencies */ import { InnerBlocks, getColorClassName } from '@wordpress/block-editor'; +import { + getPaddingClasses, + getColumnVerticalAlignClasses, + getBackgroundClasses, + getGridClasses, + getColumnClasses, +} from '../grid-css'; const save = ( { attributes = {} } ) => { - const { - className, - backgroundColor, - customBackgroundColor, - padding, - verticalAlignment, - } = attributes; + const { className, backgroundColor, customBackgroundColor, padding, verticalAlignment } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - const classes = classnames( className, { - [ 'wp-block-jetpack-layout-grid__padding-' + padding ]: true, - 'has-background': backgroundColor, - [ backgroundClass ]: backgroundClass, - [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + const classes = getGridClasses( className, { + ...getPaddingClasses( padding ), + ...getColumnVerticalAlignClasses( verticalAlignment ), + ...getBackgroundClasses( backgroundColor, backgroundClass ), + ...getColumnClasses( attributes, 'grid-column-$device__$grid-$position' ), } ); const style = { backgroundColor: backgroundClass ? undefined : customBackgroundColor, diff --git a/blocks/layout-grid/src/grid-css.js b/blocks/layout-grid/src/grid-css.js new file mode 100644 index 00000000..817651ed --- /dev/null +++ b/blocks/layout-grid/src/grid-css.js @@ -0,0 +1,206 @@ +/** + * External dependencies + */ + +import classnames from 'classnames'; + +/** + * Internal dependencies + */ + +import { DEVICE_BREAKPOINTS } from './constants'; +import { convertAttributesToColumn } from './grid-values'; + +/** @typedef {import('./constants.js').ColumnAttributes} ColumnAttributes */ +/** @typedef {import('./constants.js').Device} Device */ + +/** + * This removes our own CSS so we don't duplicate anything + * + * @param {string} className + * @returns {string} + */ +function removeGridClasses( className ) { + if ( ! className ) { + return className; + } + + return className + .replace( /column\d-\w*-grid__\w*-\d*/g, '' ) + .replace( /column\d-grid__\w*-\d*/g, '' ) + .replace( /\s{2,}/, '' ) + .replace( /wp-block-jetpack-layout-gutter__\w*/, '' ) + .replace( /is-vertically-aligned-\w*/, '' ) + .replace( /are-vertically-aligned-\w*/, '' ); +} + +/** + * Get classes for all columns on the device + * + * @param {Device} device - Selected device + * @param {ColumnAttributes[]} columns - Attributes for all column + * @returns {Object.} + */ +export function getColumnClassesForEditor( device, columns ) { + if ( ! columns || columns.length === 0 ) { + return {}; + } + + return Object.assign.apply( + {}, + columns.map( ( column, index ) => + getColumnClasses( column, `grid-column-${ index + 1 }__$grid-$position`, [ device ] ) + ) + ); +} + +function transformCssPattern( pattern, gridItem, gridPosition, device ) { + return pattern + .replace( '$grid', gridItem ) + .replace( '$position', gridPosition ) + .replace( '$device', device.toLowerCase() ); +} + +/** + * Get classes for a column across all devices + * + * @param {ColumnAttributes} columnAttributes - Attributes for the column + * @param {string} cssPattern - Pattern for the CSS name. Use `$grid` for the grid item (start, span, row), `$position` for the grid position, and `$device` for the device + * @returns {Object.} + */ +export function getColumnClasses( columnAttributes, cssPattern, devices = DEVICE_BREAKPOINTS ) { + return Object.assign.apply( + {}, + devices.map( ( device ) => { + const { span, start, row } = convertAttributesToColumn( device, columnAttributes ); + + return { + // span is always present + [ transformCssPattern( cssPattern, 'span', span, device ) ]: true, + + // start is always present, but is a value offset from the row + [ transformCssPattern( cssPattern, 'start', start + 1, device ) ]: true, + + // row is only needed if not on the first row + [ transformCssPattern( cssPattern, 'row', row + 1, device ) ]: row > 0, + }; + } ) + ); +} + +/** + * Get Layout Grid editor classes + * + * @param {string} device - Current editor device + * @param {boolean} canResize - Can we resize the selected device at the current screen width? + * @returns {Object.} + */ +export function getGridEditorClasses( device, canResize ) { + return { + // Breakpoint + 'wp-block-jetpack-layout-tablet': device === 'Tablet', + 'wp-block-jetpack-layout-desktop': device === 'Desktop', + 'wp-block-jetpack-layout-mobile': device === 'Mobile', + + // Is this grid resizable on this screen size? + 'wp-block-jetpack-layout-resizable': canResize, + }; +} + +/** + * Get classes for the grid vertical alignment + * + * @param {string|null} verticalAlignment - Vertical alignment + * @returns {Object.} + */ +export function getGridVerticalAlignClasses( verticalAlignment ) { + return { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment && verticalAlignment !== 'top', + }; +} + +/** + * Get classes for the column vertical alignment + * + * @param {string|null} verticalAlignment - Vertical alignment + * @returns {Object.} + */ +export function getColumnVerticalAlignClasses( verticalAlignment ) { + return { + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment && verticalAlignment !== 'top', + }; +} + +/** + * Get vertical alignment for all the columns for the editor + * + * @param {ColumnAttributes[]} columns - Attributes for all column + * @returns {Object.} + */ +export function getColumnVerticalAlignEditorClasses( columns ) { + if ( ! columns || columns.length === 0 ) { + return {}; + } + + return Object.assign.apply( + {}, + columns.map( ( column, index ) => ( { + [ `grid-column-${ index + 1 }__valign-top` ]: column.verticalAlignment === 'top', + [ `grid-column-${ index + 1 }__valign-center` ]: column.verticalAlignment === 'center', + [ `grid-column-${ index + 1 }__valign-bottom` ]: column.verticalAlignment === 'bottom', + } ) ) + ); +} + +/** + * Get classes for the padding + * + * @param {string} padding - Padding size + * @returns {Object.} + */ +export function getPaddingClasses( padding ) { + return { + [ 'wp-block-jetpack-layout-grid__padding-' + padding ]: padding.length > 0, + }; +} + +/** + * Get classes for the gutter + * + * @param {boolean} addGutterEnds - Add gutter to the ends of the gried + * @param {('none'|'small'|'medium'|'huge')} gutterSize - Gutter size + * @returns {Object.} + */ +export function getGutterClasses( addGutterEnds, gutterSize ) { + return { + 'wp-block-jetpack-layout-gutter__nowrap': ! addGutterEnds, + 'wp-block-jetpack-layout-gutter__none': gutterSize === 'none', + 'wp-block-jetpack-layout-gutter__small': gutterSize === 'small', + 'wp-block-jetpack-layout-gutter__medium': gutterSize === 'medium', + 'wp-block-jetpack-layout-gutter__huge': gutterSize === 'huge', + }; +} + +/** + * Get classes for the background colour + * + * @param {string} backgroundColor - Background colour + * @param {string} backgroundClass - Background class + * @returns {Object.} + */ +export function getBackgroundClasses( backgroundColor, backgroundClass ) { + return { + 'has-background': backgroundColor, + [ backgroundClass ]: backgroundClass, + }; +} + +/** + * Merge all column classes together along with the editor class name. Note this will remove existing Layout Grid classes + * + * @param {string} className - Existing editor className + * @param {Object.} extra - Any additional classes + */ +export function getGridClasses( className, extra ) { + return classnames( removeGridClasses( className ), extra ); +} diff --git a/blocks/layout-grid/src/grid-values.js b/blocks/layout-grid/src/grid-values.js new file mode 100644 index 00000000..6f5fc062 --- /dev/null +++ b/blocks/layout-grid/src/grid-values.js @@ -0,0 +1,143 @@ +/** + * Internal dependencies + */ + +import { DEVICE_MOBILE, DEVICE_TABLET, DEVICE_BREAKPOINTS } from './constants'; + +/** @typedef {import('./constants.js').Device} Device */ +/** @typedef {import('./constants.js').ColumnAttributes} ColumnAttributes */ +/** @typedef {import('./constants.js').Column} Column */ + +/** + * Get grid width for a device + * + * @param {Device} device - Device + * @returns {number} + */ +export function getGridWidth( device ) { + if ( device === DEVICE_TABLET ) { + return 8; + } else if ( device === DEVICE_MOBILE ) { + return 4; + } + + return 12; +} + +/** + * Get grid rows for a device + * + * @param {Device} device - Device + * @returns {number} + */ +export const getGridRows = ( device ) => { + if ( device === DEVICE_TABLET ) { + return 2; + } else if ( device === DEVICE_MOBILE ) { + return 4; + } + + return 1; +}; + +/** + * Get default span for a column, given a device and number of columns + * + * - 1 column: desktop=1x12x1 tablet=1x8x1 mobile=1x4x1 + * - 2 column: desktop=2x6x1 tablet=2x4x1 mobile=1x4x2 + * - 3 column: desktop=3x4x1 tablet=2x4x1 + 1x8x1 mobile=1x4x3 + * - 4 column: desktop=4x3x1 tablet=2x4x2 mobile=1x4x4 + * + * @param {Device} device - Device + * @param {number} columns - Number of columns + * @param {number} column - Current column + * @returns {number} + */ +export function getDefaultSpan( device, columns, column ) { + if ( device === DEVICE_TABLET ) { + if ( columns === 3 && column === 2 ) { + return getGridWidth( device ); + } else if ( columns > 1 ) { + return getGridWidth( device ) / 2; + } + + return getGridWidth( device ); + } + + if ( device === DEVICE_MOBILE ) { + return getGridWidth( device ); + } + + return getGridWidth( device ) / columns; +} + +/** + * @param {Device} device + * @param {ColumnAttributes} attributes + * @returns {Column} + */ +export function convertAttributesToColumn( device, attributes ) { + return { + span: attributes[ `span${ device }` ] || 0, + start: attributes[ `start${ device }` ] || 0, + row: attributes[ `row${ device }` ] || 0, + }; +} + +/** + * @param {Device} device + * @param {Column} column + * @returns {ColumnAttributes} attributes + */ +export function convertColumnToAttributes( device, column ) { + const { span, start, row } = column; + + return { + [ `span${ device }` ]: span, + [ `row${ device }` ]: row, + [ `start${ device }` ]: start, + }; +} + +/** + * Get the row, treating `start` as a single row split into `maxWidth` individual rows + * @param {number} start - Absolute start + * @param {number} maxWidth - Maximum width of the grid for the device + * @returns {number} + */ +function getGridRow( start, maxWidth ) { + return Math.floor( start / maxWidth ); +} + +/** + * Get the relative start position, treating `start` as a single row split into `maxWidth` individual rows + * + * @param {number} start - Absolute start + * @param {number} maxWidth - Maximum width of the grid for the device + * @returns {number} + */ +function getGridRowStart( start, maxWidth ) { + return start % maxWidth; +} + +/** + * Get default layout for a number of columns on a particular device + * + * @param {number} totalColumns - Total number of columns + * @param {number} columnNumber - Column number + * @returns {ColumnAttributes} + */ +export function getDefaultColumnAttributes( totalColumns, columnNumber ) { + return Object.assign.apply( + {}, + DEVICE_BREAKPOINTS.map( ( device ) => { + const span = getDefaultSpan( device, totalColumns, columnNumber ); + + return convertColumnToAttributes( device, { + span, + row: getGridRow( span * columnNumber, getGridWidth( device ) ), + start: getGridRowStart( span * columnNumber, getGridWidth( device ) ), + } ); + } ) + ); +} diff --git a/blocks/layout-grid/src/grid.scss b/blocks/layout-grid/src/grid.scss index 3f86f160..d3b12d82 100644 --- a/blocks/layout-grid/src/grid.scss +++ b/blocks/layout-grid/src/grid.scss @@ -58,8 +58,8 @@ @for $i from 1 through 12 { @for $x from 1 through 4 { - &.column#{ $x }-grid__start-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(#{ $x }), - &.column#{ $x }-grid__start-#{ $i } > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:nth-child(#{ $x }) { + &.grid-column-#{ $x }__start-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(#{ $x }), + &.grid-column-#{ $x }__start-#{ $i } > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:nth-child(#{ $x }) { grid-column-start: $i; } } @@ -67,21 +67,21 @@ @for $i from 1 through 12 { @for $x from 1 through 4 { - &.column#{ $x }-grid__span-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(#{ $x }), - &.column#{ $x }-grid__span-#{ $i } > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:nth-child(#{ $x }) { + &.grid-column-#{ $x }__span-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(#{ $x }), + &.grid-column-#{ $x }__span-#{ $i } > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:nth-child(#{ $x }) { grid-column-end: span $i; // Set it to span $i columns, regardless of starting position. } } - &.column4-grid__span-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(5) { + &.grid-column-4__span-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(5) { grid-column-end: span $i; // The re-resizable module adds extra elements that confuse the calculation in 4 column mode } } @for $i from 1 through 4 { @for $x from 1 through 4 { - &.column#{ $x }-grid__row-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(#{ $x }), - &.column#{ $x }-grid__row-#{ $i } > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:nth-child(#{ $x }) { + &.grid-column-#{ $x }__row-#{ $i } > .wpcom-resize-grid > .wp-block:nth-child(#{ $x }), + &.grid-column-#{ $x }__row-#{ $i } > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:nth-child(#{ $x }) { grid-row-start: $i; } } diff --git a/blocks/layout-grid/src/grid/block-controls/index.js b/blocks/layout-grid/src/grid/block-controls/index.js new file mode 100644 index 00000000..769395b4 --- /dev/null +++ b/blocks/layout-grid/src/grid/block-controls/index.js @@ -0,0 +1,84 @@ +/** + * WordPress dependencies + */ + +import { + BlockControls, + BlockVerticalAlignmentToolbar, +} from '@wordpress/block-editor'; +import { + Button, + ToolbarGroup, + MenuGroup, + MenuItem, + Dropdown, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { getLayouts } from '../../constants'; + +/** @typedef {import('../edit.js').SetDeviceCallback} SetDeviceCallback */ +/** @typedef {import('../edit.js').VerticalAlignment} VerticalAlignment */ +/** @typedef {import('../edit.js').SetAlignmentCallback} SetAlignmentCallback */ +/** @typedef {import('../../constants.js').Device} Device */ + +/** + * Block controls for the Layout Grid + * + * @param {object} props - Component props + * @param {Device} props.device - Current device + * @param {SetDeviceCallback} props.setDevice - Callback to change the device + * @param {VerticalAlignment} props.verticalAlignment - Vertical verticalAlignment + * @param {SetAlignmentCallback} props.setVerticalAlignment - Callback to change the vertical alignment + */ +function LayoutGridBlockControls( props ) { + const { + device, + setDevice, + verticalAlignment, + setVerticalAlignment, + } = props; + + return ( + + + ( + + - ) ) } - - - { this.renderDeviceSettings( columns, deviceType, attributes ) } - - - -

{ __( 'Gutter size', 'layout-grid' ) }

- - setAttributes( { gutterSize: newValue, addGutterEnds: newValue === 'none' ? false : addGutterEnds } ) } - options={ getGutterValues() } - /> - - { gutterSize === 'none' ? ( - - { toggleControl } - - ) : toggleControl } - - - - - - - - - ( - - + ) ) } + + + + + + +

{ __( 'Gutter size', 'layout-grid' ) }

+ + + setAttributes( { + gutterSize: newValue, + addGutterEnds: + newValue === 'none' ? false : addGutterEnds, + } ) + } + options={ getGutterValues() } + /> + + { gutterSize === 'none' ? ( + { toggleControl } + ) : ( + toggleControl + ) } + + + ); +} + +export default LayoutGridInspector; diff --git a/blocks/layout-grid/src/grid/layout-grid/index.js b/blocks/layout-grid/src/grid/layout-grid/index.js deleted file mode 100644 index 6c479391..00000000 --- a/blocks/layout-grid/src/grid/layout-grid/index.js +++ /dev/null @@ -1,284 +0,0 @@ -/** - * Internal dependencies - */ - -import { - getSpanForDevice, - getOffsetForDevice, -} from '../../constants'; -import { - getGridWidth, - getGridMax, - getDefaultSpan, -} from '../grid-defaults'; - -/** - * This contains all the grid column layout logic. That is, it knows how to move and resize columns on a grid (including a grid with multiple rows). - * It does not handle mapping resize handles to grid positions - */ -class LayoutGrid { - constructor( attributes, device, columns ) { - this.attributes = attributes; - this.device = device; - this.columnCount = columns; - } - - // Gets a copy of the grid so we can modify it - getGridValues() { - const grid = {}; - - for ( let pos = 0; pos < this.columnCount; pos++ ) { - const defaultSpan = getDefaultSpan( this.device, this.columnCount, pos ); - - grid[ getSpanForDevice( pos, this.device ) ] = this.getSpan( pos ) || defaultSpan; - grid[ getOffsetForDevice( pos, this.device ) ] = this.getOffset( pos ); - } - - return grid; - } - - /* - * Apply a set of adjustments and return a new copy of the grid - */ - applyAdjustments( adjustments ) { - let grid = this.getGridValues(); - - // Run through the adjustments and apply to the grid - for ( let index = 0; index < adjustments.length; index++ ) { - grid = { ...grid, ...adjustments[ index ] }; - } - - return grid; - } - - getSpanAdjustment( column, value ) { - return { [ getSpanForDevice( column, this.device ) ]: value } - } - - getAdjustOffset( column, value ) { - return { [ getOffsetForDevice( column, this.device ) ]: value } - } - - getShrinkOffset( column, remaining ) { - const spareOffset = this.getOffset( column ); - const offsetUsed = remaining >= spareOffset ? spareOffset : remaining; - - return { - adjustment: this.getAdjustOffset( column, spareOffset - offsetUsed ), - offsetUsed, - }; - } - - hasOverlaps( positions ) { - for ( let index = 0; index < positions.length; index++ ) { - const first = positions[ index ]; - - for ( let inner = index + 1; inner < positions.length; inner++ ) { - const second = positions[ inner ]; - - if ( first.start > second.start && first.start < second.end ) { - return true; - } - - if ( first.end > second.start && first.end < second.end ) { - return true; - } - } - } - - return false; - } - - /* - * Determine if an adjusted grid is valid. That is, the total of all the spans and offsets does not exceed - * the maximum allowed by the grid layout, and none of the columns overlap each other - */ - validateGrid( grid ) { - const positions = []; - const rowWidth = getGridWidth( this.device ); - let total = 0, rowTotal = 0; - - for ( let pos = 0; pos < this.columnCount; pos++ ) { - const span = grid[ getSpanForDevice( pos, this.device ) ]; - const offset = grid[ getOffsetForDevice( pos, this.device ) ]; - - rowTotal += offset; - if ( rowTotal >= rowWidth ) { - rowTotal = rowTotal - rowWidth; - } - - rowTotal += span; - - // Does this row exceed the limit? - if ( rowTotal > rowWidth ) { - return false; - } - - positions.push( { start: total + offset, end: total + offset + span } ); - - total += span + offset; - } - - // Does it fit within the grid? - if ( total > getGridMax( this.device, this.columnCount ) ) { - return false; - } - - // Do we have any overlaps? - if ( this.hasOverlaps( positions ) ) { - return false; - } - - return true; - } - - /* - * The end of a column was adjusted. Absorb/increase any offsets in subsequent columns so they remain in place - * Returns an array of column adjustments - */ - getEndAdjustments( column, diff ) { - const changes = []; - - if ( diff < 0 ) { - // Column end has moved left - add extra offset to the next column to keep it in place - const adjustment = this.getAdjustOffset( column, this.getOffset( column ) + Math.abs( diff ) ); - - return [ adjustment ]; - } - - if ( diff > 0 ) { - // Column end has moved right - eat any offset space after the column - for ( let index = column; index < this.columnCount && diff > 0; index++ ) { - const adjust = this.getShrinkOffset( index, Math.abs( diff ) ); - - changes.push( adjust.adjustment ); - diff -= adjust.offsetUsed; - } - } - - return changes; - } - - getStartMovedLeft( column, diff ) { - const changes = []; - - // Column start has moved left - eat any offset space before the column, including the column's own offset - for ( let index = column; index >= 0 && diff > 0; index-- ) { - const adjust = this.getShrinkOffset( index, diff ); - - changes.push( adjust.adjustment ); - diff -= adjust.offsetUsed; - } - - return changes; - } - - /* - * The start of a column was adjusted. Make adjustments to other columns so everything remains in place - * Returns an array of column adjustments - */ - getStartAdjustments( column, newStart ) { - const currentOffset = this.getOffset( column ); - const newOffset = this.getOffsetFromStart( column, newStart ); - const diff = newOffset - currentOffset; - - if ( diff < 0 ) { - return this.getStartMovedLeft( column, Math.abs( diff ) ); - } - - return [ this.getAdjustOffset( column, newOffset ) ]; - } - - /* - * Get span for a column - */ - getSpan( column ) { - return this.attributes[ getSpanForDevice( column, this.device ) ] - } - - /* - * Get offset from previous column - */ - getOffset( column ) { - return this.attributes[ getOffsetForDevice( column, this.device ) ] - } - - /* - * Get absolute start value for a column from the start of the row - */ - getStart( column ) { - let start = 0; - - // Add all the offset and spans of previous columns - for ( let pos = 0; pos < column; pos++ ) { - start += this.getSpan( pos ) + this.getOffset( pos ); - } - - const rows = Math.max( 1, ( Math.floor( start / getGridWidth( this.device ) ) ) ); - - // Finally add the offset of our column to take us to the start of it, and then make it relative to the start of the row - return ( start + this.getOffset( column ) ) % ( rows * getGridWidth( this.device ) ); - } - - /* - * Opposite of getStart() - returns an offset from the previous column when given a new start position - */ - getOffsetFromStart( column, start ) { - if ( column === 0 ) { - // Simple - the first column offset is the start position - return start; - } - - const currentStart = this.getStart( column ); // This is the current start - const diff = start - currentStart; - - return this.getOffset( column ) + diff; - } - - convertOffsetToStart( column, offset ) { - const start = this.getStart( column ); - const diff = offset - this.getOffset( column ); - - return start + diff; - } - - /* - * Returns the layout grid, with an adjustment made. If no adjustment is made then returns null - */ - getAdjustedGrid( column, adjustment ) { - const { - start = this.getStart( column ), - span = this.getSpan( column ), - } = adjustment; - - // Get an array of adjustments so we can then check the grid is still valid before committing - let adjustments = []; - - if ( start !== this.getStart( column ) && span !== this.getSpan( column ) ) { - // Both start and span have changed - adjustments = adjustments.concat( this.getStartAdjustments( column, start ) ); - adjustments = adjustments.concat( this.getSpanAdjustment( column, span ) ); - } else if ( span !== this.getSpan( column ) ) { - // Only span has changed. Adjust that, and any columns that come after this - adjustments = adjustments.concat( this.getSpanAdjustment( column, span ) ); - adjustments = adjustments.concat( this.getEndAdjustments( column + 1, span - this.getSpan( column ) ) ); - } else if ( start !== this.getStart( column ) ) { - // Only the start has changed. Adjust that, and ensure subsequent columns dont move - adjustments = adjustments.concat( this.getStartAdjustments( column, start ) ); - adjustments = adjustments.concat( this.getEndAdjustments( column + 1, start - this.getStart( column ) ) ); - } - - // Convert the array of adjustments to a new set of attributes - const adjustedGrid = this.applyAdjustments( adjustments ); - - // Now check everything still fits. If it doesnt then we ignore the entire change - if ( adjustments.length > 0 && this.validateGrid( adjustedGrid ) ) { - // Update all the values at once - return adjustedGrid; - } - - return null; - } -} - -export default LayoutGrid; diff --git a/blocks/layout-grid/src/grid/placeholder/index.js b/blocks/layout-grid/src/grid/placeholder/index.js new file mode 100644 index 00000000..296a2d24 --- /dev/null +++ b/blocks/layout-grid/src/grid/placeholder/index.js @@ -0,0 +1,54 @@ +/** + * WordPress dependencies + */ + +import { Button, Placeholder } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ + +import { getColumns } from '../../constants'; +import ColumnIcon from '../../icons'; + +/** @typedef {import('../inspector/index.js').ChangeNumColumnsCallback} ChangeNumColumnsCallback */ + +/** + * Layout grid placeholder + * + * @param {object} props - Component props + * @param {string} props.className - Class for the placeholder + * @param {ChangeNumColumnsCallback} props.changeNumberOfColumns - Change the number of columns + */ +function LayoutGridPlaceholder( props ) { + const { className, changeNumberOfColumns } = props; + + return ( + +
    + { getColumns().map( ( column ) => ( +
  • +
    • + ) ) } +
+ + ); +} + +export default LayoutGridPlaceholder; diff --git a/blocks/layout-grid/src/grid/resize-grid/index.js b/blocks/layout-grid/src/grid/resize-grid/index.js deleted file mode 100644 index 301567c4..00000000 --- a/blocks/layout-grid/src/grid/resize-grid/index.js +++ /dev/null @@ -1,201 +0,0 @@ -/** - * External dependencies - */ - -import classnames from 'classnames'; - -/** - * WordPress dependencies - */ - -import { Component, createRef } from '@wordpress/element'; - -/** - * Internal dependencies - */ - -import findNearest from './nearest'; -import ResizeHandle from './resize-handle'; - -/* - * The ResizeGrid is responsible for providing resizable grid column handles. It maps absolute mouse positions to grid columns, and then - * validates that with the LayoutGrid. - * - * Due to the way the Gutenberg DOM is laid out, the ResizeGrid doesn't provide the resize handles that surround a column. Instead it - * listens for mousedown events and when one happens it then displays a 'fake' resize handle that can be dragged. As the fake handle is - * moved, the underlying grid is updated, giving the appearance it is being directly updated. - */ -class ResizeGrid extends Component { - constructor( props ) { - super( props ); - - this.containerRef = createRef(); - this.state = { - resizingColumn: -1, - xPos: 0, - height: 0, - }; - } - - getNearestColumn( direction, mouse ) { - const { totalColumns, layoutGrid } = this.props; - const start = layoutGrid.getStart( this.state.resizingColumn ); - const span = layoutGrid.getSpan( this.state.resizingColumn ); - const nearest = Math.min( totalColumns, Math.max( 0, findNearest( this.containerRef.current, this.getMouseX( mouse ), direction, totalColumns ) ) ); - - if ( direction === 'left' ) { - if ( nearest === start ) { - // No change - return null; - } - - // We're changing the start position - adjust the span - const diff = Math.abs( nearest - start ); - const adjustment = { - start: nearest, - span: nearest > start ? span - diff : span + diff, - direction, - }; - - // Check we don't go beyond the end - if ( adjustment.start >= start + span ) { - return null; - } - - // Minimum span of 1 - adjustment.span = Math.max( 1, adjustment.span ); - return adjustment; - } - - // We're changing the span - // New span is from the new position minus the current start - return { - span: Math.max( 1, nearest - start ), - direction, - }; - } - - getMouseX( event ) { - const { clientX, targetTouches } = event; - - return clientX || ( targetTouches && targetTouches[ 0 ].clientX ); - } - - getAdjustedOffset( offset, optionalWidth = 0 ) { - const { width } = this.state; - const handleWidth = optionalWidth > 0 ? optionalWidth : width; - - return offset - this.containerRef.current.getBoundingClientRect().left - ( ( handleWidth ) / 2 ); - } - - getAdjustedTop( offset ) { - return offset - this.containerRef.current.getBoundingClientRect().top; - } - - getRestrictedOffset( offset ) { - const { direction, max, width } = this.state; - - // Ensure we dont go beyond or before the end of the other side of our block - if ( direction === 'left' ) { - return Math.min( max - width, offset ); - } - - return Math.max( max + width, offset ); - } - - getChildPosition( element ) { - let pos = 0; - - while ( element.previousSibling !== null ) { - element = element.previousSibling; - pos++; - } - - return pos; - } - - onMouseDown = ev => { - const { target } = ev; - - // This is a bit of hardcoded DOM searching - we check if the current click is on a resize handle and then find the column associated with that - // There may be a better way. - if ( ( ev.button === 0 || ev.touches ) && ( target.dataset.resizeRight || target.dataset.resizeLeft ) ) { - this.block = target.closest( '.wp-block' ); - - const { height, right, left, top } = this.block.getBoundingClientRect(); - const { width } = target.getBoundingClientRect(); - const pos = this.getChildPosition( this.block ); - const isLeft = target.dataset.resizeLeft; - - this.setState( { - resizingColumn: pos, - xPos: this.getAdjustedOffset( this.getMouseX( ev ), width ), - height, - width, - top: this.getAdjustedTop( top ), - direction: isLeft ? 'left' : 'right', - max: isLeft ? this.getAdjustedOffset( right, width ) : this.getAdjustedOffset( left, width ), - } ); - - if ( ev.button === 0 ) { - document.addEventListener( 'mousemove', this.onMouseMove ); - document.addEventListener( 'mouseup', this.onMouseUp ); - - ev.preventDefault(); - } else { - document.addEventListener( 'touchmove', this.onMouseMove ); - document.addEventListener( 'touchend', this.onMouseUp ); - } - - ev.stopPropagation(); - } - } - - onMouseMove = ev => { - ev.stopPropagation(); - - if ( ev.touches === undefined ) { - ev.preventDefault(); - } - - const { height } = this.block.getBoundingClientRect(); - - this.setState( { - xPos: this.getRestrictedOffset( this.getAdjustedOffset( this.getMouseX( ev ) ) ), - height, - } ); - - // Finally pass this up if a grid adjustment has been triggered - const adjustment = this.getNearestColumn( this.state.direction, ev ); - if ( adjustment ) { - this.props.onResize( this.state.resizingColumn, adjustment ); - } - } - - onMouseUp = ev => { - this.setState( { resizingColumn: -1 } ); - - document.removeEventListener( 'mousemove', this.onMouseMove ); - document.removeEventListener( 'mouseup', this.onMouseUp ); - document.removeEventListener( 'touchmove', this.onMouseMove ); - document.removeEventListener( 'touchend', this.onMouseUp ); - } - - render() { - const { className, children, isSelected } = this.props; - const { resizingColumn, xPos, height } = this.state; - const classes = classnames( - className, - resizingColumn !== -1 ? 'wp-block-jetpack-layout-grid__resizing' : null, - ); - - return ( -
- { resizingColumn !== -1 && } - { children } -
- ); - } -} - -export default ResizeGrid; diff --git a/blocks/layout-grid/src/grid/save.js b/blocks/layout-grid/src/grid/save.js index 800ce8bb..3e5466b2 100644 --- a/blocks/layout-grid/src/grid/save.js +++ b/blocks/layout-grid/src/grid/save.js @@ -1,9 +1,3 @@ -/** - * External dependencies - */ - -import classnames from 'classnames'; - /** * WordPress dependencies */ @@ -14,18 +8,18 @@ import { InnerBlocks } from '@wordpress/block-editor'; * Internal dependencies */ -import { getAsCSS, removeGridClasses, getGutterClasses } from './css-classname'; +import { + getGridVerticalAlignClasses, + getGutterClasses, + getGridClasses, +} from '../grid-css'; -const save = ( { attributes, innerBlocks } ) => { - const { - className, - } = attributes; - const extra = getAsCSS( innerBlocks.length, attributes ); - const classes = classnames( - removeGridClasses( className ), - extra, - getGutterClasses( attributes ), - ); +export default function save( { attributes } ) { + const { className, addGutterEnds, gutterSize, verticalAlignment } = attributes; + const classes = getGridClasses( className, { + ...getGutterClasses( addGutterEnds, gutterSize ), + ...getGridVerticalAlignClasses( verticalAlignment ), + } ); return (
@@ -33,5 +27,3 @@ const save = ( { attributes, innerBlocks } ) => {
); }; - -export default save; diff --git a/blocks/layout-grid/src/index.js b/blocks/layout-grid/src/index.js index 419c2f86..45cdfa91 100644 --- a/blocks/layout-grid/src/index.js +++ b/blocks/layout-grid/src/index.js @@ -14,20 +14,7 @@ import saveGrid from './grid/save'; import editColumn from './grid-column/edit'; import saveColumn from './grid-column/save'; import { GridIcon, GridColumnIcon } from './icons'; -import { getSpanForDevice, getOffsetForDevice, DEVICE_BREAKPOINTS, MAX_COLUMNS } from './constants'; - -function getColumnAttributes( total, breakpoints ) { - const attributes = {}; - - for ( let index = 0; index < total; index++ ) { - breakpoints.map( ( breakpoint ) => { - attributes[ getSpanForDevice( index, breakpoint ) ] = { type: 'number' }; - attributes[ getOffsetForDevice( index, breakpoint ) ] = { type: 'number', default: 0 }; - } ); - } - - return attributes; -} +import { DEVICE_BREAKPOINTS } from './constants'; export function registerBlock() { registerBlockType( 'jetpack/layout-grid', { @@ -86,7 +73,6 @@ export function registerBlock() { verticalAlignment: { type: 'string', }, - ...getColumnAttributes( MAX_COLUMNS, DEVICE_BREAKPOINTS ), }, edit: editGrid, save: saveGrid, @@ -117,6 +103,21 @@ export function registerBlock() { verticalAlignment: { type: 'string', }, + ...Object.assign.apply( + {}, + DEVICE_BREAKPOINTS.map( ( breakpoint ) => ( { + [ `span${ breakpoint }` ]: { + type: 'number', + }, + [ `start${ breakpoint }` ]: { + type: 'number', + }, + [ `row${ breakpoint }` ]: { + type: 'number', + default: 0, + }, + } ) ) + ), }, edit: editColumn, save: saveColumn, diff --git a/blocks/layout-grid/style.scss b/blocks/layout-grid/style.scss index 38184c4b..c8cf909c 100644 --- a/blocks/layout-grid/style.scss +++ b/blocks/layout-grid/style.scss @@ -170,6 +170,7 @@ * Individual column alignment */ .wp-block-jetpack-layout-grid-column { + // These only affect the front end. The editor has specific CSS &.is-vertically-aligned-top { align-self: flex-start; } diff --git a/bundler/resources/jetpack-layout-grid/readme.txt b/bundler/resources/jetpack-layout-grid/readme.txt index e7bbfd67..aefabd7c 100644 --- a/bundler/resources/jetpack-layout-grid/readme.txt +++ b/bundler/resources/jetpack-layout-grid/readme.txt @@ -27,6 +27,9 @@ You can follow development, file an issue, suggest features, and view the source * Add vertical alignment to grid and grid columns * Mirror grid device breakpoint with editor preview breakpoint += 1.2.2 - 23rd June 2020 = +* Fix the CSS loading fix from 1.2.1 so it uses wp_register_style + = 1.2.1 - 10th June 2020 = * Fix block inserter to show inside a grid column * Fix vertical margin in editor so it better matches the display