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

Try: Editor Grid #4314

Closed
wants to merge 4 commits into from
Closed

Try: Editor Grid #4314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
77c4a49
Set up grid in visual editor.
mtias Jan 5, 2018
9e295ca
Add new alignment called "card".
mtias Apr 3, 2018
ce24a0d
Assign grid areas to diffrent alignment combinations.
mtias Apr 3, 2018
c111972
Add new alignments for pullLeft, pullRight, and twoFold with icons.
mtias Apr 4, 2018
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
16 changes: 14 additions & 2 deletions blocks/block-alignment-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,22 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
icon: 'align-full-width',
title: __( 'Full width' ),
},
pullLeft: {
icon: 'align-pull-left',
title: __( 'Pull left' ),
},
pullRight: {
icon: 'align-pull-right',
title: __( 'Pull right' ),
},
twoFold: {
icon: 'layout-two-fold',
title: __( 'Two Fold' ),
},
};

const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
const WIDE_CONTROLS = [ 'wide', 'full' ];
const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'pullLeft', 'pullRight', 'wide', 'full', 'twoFold' ];
const WIDE_CONTROLS = [ 'pullLeft', 'pullRight', 'wide', 'full', 'twoFold' ];

export function BlockAlignmentToolbar( { value, onChange, controls = DEFAULT_CONTROLS, wideControlsEnabled = false } ) {
function applyOrUnset( align ) {
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/image/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ class ImageBlock extends Component {
}

updateAlignment( nextAlign ) {
const extraUpdatedAttributes = [ 'wide', 'full' ].indexOf( nextAlign ) !== -1 ?
const extraUpdatedAttributes = [ 'wide', 'full', 'card' ].indexOf( nextAlign ) !== -1 ?
{ width: undefined, height: undefined } :
{};
this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } );
Expand Down
4 changes: 2 additions & 2 deletions blocks/library/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export const settings = {
return tag === 'img' || ( hasImage && tag === 'figure' );
},
transform( node ) {
const matches = /align(left|center|right)/.exec( node.className );
const matches = /align(left|center|right|pullLeft|pullRight|twoFold)/.exec( node.className );
const align = matches ? matches[ 1 ] : undefined;
const blockType = getBlockType( 'core/image' );
const attributes = getBlockAttributes( blockType, node.outerHTML, { align } );
Expand Down Expand Up @@ -150,7 +150,7 @@ export const settings = {

getEditWrapperProps( attributes ) {
const { align, width } = attributes;
if ( 'left' === align || 'center' === align || 'right' === align || 'wide' === align || 'full' === align ) {
if ( 'left' === align || 'pullLeft' === align || 'center' === align || 'right' === align || 'pullRight' === align || 'wide' === align || 'full' === align || 'twoFold' === align ) {
return { 'data-align': align, 'data-resized': !! width };
}
},
Expand Down
9 changes: 9 additions & 0 deletions components/dashicon/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,12 @@ export default class Dashicon extends wp.element.Component {
case 'align-none':
path = 'M3 5h14V3H3v2zm10 8V7H3v6h10zM3 17h14v-2H3v2z';
break;
case 'align-pull-left':
path = 'M11 5h6V3h-6v2zm-2 6V3H3v8h6zm2-2h6V7h-6v2zm0 4h6v-2h-6v2zm0 4h6v-2h-6v2z';
break;
case 'align-pull-right':
path = 'M9 3H3v2h6V3zm8 8V3h-6v8h6zM9 7H3v2h6V7zm0 4H3v2h6v-2zm0 4H3v2h6v-2z';
break;
case 'align-right':
path = 'M3 5h14V3H3v2zm0 4h3V7H3v2zm14 4V7H8v6h9zM3 13h3v-2H3v2zm0 4h14v-2H3v2z';
break;
Expand Down Expand Up @@ -552,6 +558,9 @@ export default class Dashicon extends wp.element.Component {
case 'laptop':
path = 'M3 3h14c.6 0 1 .4 1 1v10c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1zm13 2H4v8h12V5zm-3 1H5v4zm6 11v-1H1v1c0 .6.5 1 1.1 1h15.8c.6 0 1.1-.4 1.1-1z';
break;
case 'layout-two-fold':
path = 'M9 16V4H3v12h6zm2-7h6V7h-6v2zm0 4h6v-2h-6v2z';
break;
case 'layout':
path = 'M2 2h5v11H2V2zm6 0h5v5H8V2zm6 0h4v16h-4V2zM8 8h5v5H8V8zm-6 6h11v4H2v-4z';
break;
Expand Down
71 changes: 64 additions & 7 deletions edit-post/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,24 @@
.edit-post-visual-editor {
position: relative;
padding: 50px 0;
margin: 0 auto;
display: grid;
grid-template-columns:
[full-start] minmax(1em, 1fr)
[wide-start] minmax(0, 1fr)
[content-start] minmax(0, 350px) [middle] minmax(0, 350px) [content-end]
minmax(0, 1fr) [wide-end]
minmax(1em, 1fr) [full-end];

.editor-writing-flow,
.editor-writing-flow > div,
.editor-writing-flow > div > div,
.editor-writing-flow > div > div > div,
.editor-writing-flow .editor-block-list__layout {
grid-column: full;
display: inherit;
grid-template-columns: inherit;
}

&,
& p {
Expand Down Expand Up @@ -38,9 +56,9 @@
}

.edit-post-visual-editor .editor-block-list__block {
margin-left: auto;
margin-right: auto;
max-width: $content-width;
// margin-left: auto;
// margin-right: auto;
// max-width: $content-width;

@include break-small() {
.editor-block-list__block-edit {
Expand All @@ -56,12 +74,48 @@
}
}

&[data-align="twoFold"] {
grid-column: wide-start / middle;


+ div {
grid-column: middle / wide-end;
align-self: center;
}
}

&[data-align="pullLeft"] {
grid-column: wide-start / content-start;
height: 0;
align-self: start;
}

&[data-align="pullRight"] {
grid-column: content-end / wide-end;
height: 0;
align-self: end;
}

&[data-align="left"] {
grid-column: content-start / middle;

+ div {
grid-column: middle / content-end;
}
}

&[data-align="right"] {
grid-column: content-end / wide-end;
}

&[data-align="wide"] {
max-width: 1100px;
// max-width: 1100px;
grid-column: wide;
}

&[data-align="full"] {
max-width: none;
grid-column: full;
}
}

Expand All @@ -79,9 +133,12 @@
}

.edit-post-visual-editor .editor-post-title {
margin-left: auto;
margin-right: auto;
max-width: $content-width + ( 2 * $block-side-ui-padding );
// margin-left: auto;
// margin-right: auto;
// max-width: $content-width + ( 2 * $block-side-ui-padding );
grid-column: content;
justify-self: left;
width: 100%;

.editor-post-permalink {
left: $block-padding;
Expand Down
99 changes: 50 additions & 49 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@
position: relative;
padding-left: $block-padding;
padding-right: $block-padding;
grid-column: content;

@include break-small() {
// The block mover needs to stay inside the block to allow clicks when hovering the block
Expand Down Expand Up @@ -258,55 +259,55 @@
* Alignments
*/

&[data-align="left"],
&[data-align="right"] {
// Without z-index, won't be clickable as "above" adjacent content
z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
width: 100%;

// When images are floated, the block itself should collapse to zero height
margin-bottom: 0;

// Hide block outline when an image is floated
&:before {
content: none;
}
}

// Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
&[data-align="left"],
&[data-align="right"] {
> .editor-block-list__block-edit {
max-width: 360px;
width: 100%;
}

// reset when data-resized
&[data-resized="true"] > .editor-block-list__block-edit {
max-width: none;
width: auto;
}
}

// Left
&[data-align="left"] {
.editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated
float: left;
margin-right: 2em;
}
}

// Right
&[data-align="right"] {
.editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated
float: right;
margin-left: 2em;
}

.editor-block-toolbar {
float: right;
}
}
// &[data-align="left"],
// &[data-align="right"] {
// // Without z-index, won't be clickable as "above" adjacent content
// z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' );
// width: 100%;
//
// // When images are floated, the block itself should collapse to zero height
// margin-bottom: 0;
//
// // Hide block outline when an image is floated
// &:before {
// content: none;
// }
// }
//
// // Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
// &[data-align="left"],
// &[data-align="right"] {
// > .editor-block-list__block-edit {
// max-width: 360px;
// width: 100%;
// }
//
// // reset when data-resized
// &[data-resized="true"] > .editor-block-list__block-edit {
// max-width: none;
// width: auto;
// }
// }
//
// // Left
// &[data-align="left"] {
// .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated
// float: left;
// margin-right: 2em;
// }
// }
//
// // Right
// &[data-align="right"] {
// .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated
// float: right;
// margin-left: 2em;
// }
//
// .editor-block-toolbar {
// float: right;
// }
// }

// Wide and full-wide
&[data-align="full"],
Expand Down