Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Layout Grid: Enable mobile rendering in mobile editor. #161

Merged
merged 10 commits into from
Feb 4, 2021
Merged

Layout Grid: Enable mobile rendering in mobile editor. #161

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6ecfbc6
split display device type and rendering device type to support mobile…
roo2 Dec 16, 2020
e1c5978
use element that works across different versions of GB
roo2 Dec 17, 2020
06fff2b
Remove __experimentalGetPreviewDeviceType fallback
johngodley Jan 29, 2021
e88ff28
Linting update
johngodley Jan 29, 2021
9be0033
Merge imports from same module
johngodley Jan 29, 2021
259dbfe
Refactor preview mode mobile/tablet/desktop
johngodley Jan 29, 2021
b1389aa
Tidy layout grid up for release
johngodley Feb 1, 2021
f614fd3
Remove auto-included modules
johngodley Feb 2, 2021
1cd6cc2
Fix block inspector not showing current preview device by default
johngodley Feb 4, 2021
ea1bde6
Show current preview mode in the toolbar
johngodley Feb 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blocks/layout-grid/front.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,5 +135,5 @@

// Ensure inner blocks with deliberate overflows are still constrained to column.
.wp-block-jetpack-layout-grid-column {
max-width: 100%;
max-width: 100%;
}
40 changes: 27 additions & 13 deletions blocks/layout-grid/src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,17 @@ 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 = () => ( [
export const getColumns = () => [
{
label: __( '1 column', 'layout-grid' ),
value: 1,
Expand All @@ -39,17 +41,29 @@ export const getColumns = () => ( [
label: __( '4 columns', 'layout-grid' ),
value: 4,
},
] );
];

export const DEVICE_DESKTOP = 'Desktop';
export const DEVICE_TABLET = 'Tablet';
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 },
] );
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,
},
];

export const MAX_COLUMNS = 4;

Expand Down
Loading