From ffeb24da5445b6e3753bab808f1696de1e5548a7 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 5 Mar 2020 14:38:41 +0100 Subject: [PATCH 1/2] Aligments: explore idea on image block --- packages/block-library/src/image/edit.js | 34 ++++++------------------ 1 file changed, 8 insertions(+), 26 deletions(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 28edc6a340818a..49233910fcb85b 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -33,7 +33,7 @@ import { __experimentalImageSizeControl as ImageSizeControl, __experimentalImageURLInputUI as ImageURLInputUI, } from '@wordpress/block-editor'; -import { Component, Fragment } from '@wordpress/element'; +import { Component } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { getPath } from '@wordpress/url'; import { withViewportMatch } from '@wordpress/viewport'; @@ -405,9 +405,6 @@ export class ImageEdit extends Component { src={ url } /> ); - const needsAlignmentWrapper = [ 'center', 'left', 'right' ].includes( - align - ); const mediaPlaceholder = ( { controls } - { needsAlignmentWrapper ? ( -
- { mediaPlaceholder } -
- ) : ( - mediaPlaceholder - ) } + { mediaPlaceholder } ); } - const classes = classnames( className, { + const classes = classnames( className, `align${ align }`, { 'is-transient': isBlobURL( url ), 'is-resized': !! width || !! height, 'is-focused': isSelected, [ `size-${ sizeSlug }` ]: sizeSlug, - [ `align${ align }` ]: align, } ); const isResizable = @@ -516,17 +503,13 @@ export class ImageEdit extends Component { ); - const AlignmentWrapper = needsAlignmentWrapper ? Block.div : Fragment; - const BlockContentWrapper = needsAlignmentWrapper - ? 'figure' - : Block.figure; // Disable reason: Each block can be selected by clicking on it /* eslint-disable jsx-a11y/click-events-have-key-events */ return ( <> { controls } - - +
+ { ( sizes ) => { const { @@ -702,10 +685,9 @@ export class ImageEdit extends Component { inlineToolbar /> ) } - { mediaPlaceholder } - - + +
); /* eslint-enable jsx-a11y/click-events-have-key-events */ From 68816aa416df5e6ffa2dbdbeb23f240dd4d5c058 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Thu, 5 Mar 2020 16:23:40 +0100 Subject: [PATCH 2/2] Add editor styles --- .../src/components/block-list/style.scss | 13 +---- packages/block-library/src/image/edit.js | 14 ++--- packages/edit-post/src/style.scss | 51 +++++++++++++++++-- 3 files changed, 56 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 97b0e902ca08bc..5efdafd8d365c0 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -247,12 +247,6 @@ cursor: default; } - .alignleft, - .alignright { - // Without z-index, won't be clickable as "above" adjacent content. - z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}"); - } - // Alignments. &[data-align="left"], &[data-align="right"] { @@ -288,15 +282,12 @@ // Wide and full-wide. &[data-align="full"], - &[data-align="wide"], - &.alignfull, - &.alignwide { + &[data-align="wide"] { clear: both; } // Full-wide. - &[data-align="full"], - &.alignfull { + &[data-align="full"] { margin-left: -$block-padding; margin-right: -$block-padding; diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 49233910fcb85b..2b065e5cd90ac4 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -426,16 +426,16 @@ export class ImageEdit extends Component { return ( <> { controls } - - { mediaPlaceholder } - +
+ + { mediaPlaceholder } + +
); } - const classes = classnames( className, `align${ align }`, { + const classes = classnames( className, { 'is-transient': isBlobURL( url ), 'is-resized': !! width || !! height, 'is-focused': isSelected, @@ -508,7 +508,7 @@ export class ImageEdit extends Component { return ( <> { controls } -
+
{ ( sizes ) => { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 651619f60da066..89e97d1c32b5d4 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -104,13 +104,56 @@ body.block-editor-page { .wp-block { max-width: $content-width; - &[data-align="wide"], - &.alignwide { + &[data-align="wide"] { max-width: 1100px; } - &[data-align="full"], - &.alignfull { + &[data-align="full"] { max-width: none; } } + +.wp-align-wrapper { + max-width: $content-width; + margin-left: auto; + margin-right: auto; + + > .wp-block, + &.wp-align-full { + max-width: none; + } + + &.wp-align-full { + margin-left: -$block-padding; + margin-right: -$block-padding; + + @include break-small() { + margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; + margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; + } + } + + &.wp-align-wide { + max-width: 1100px; + } + + &.wp-align-left > * { + float: left; + margin-right: 2em; + } + + &.wp-align-right > * { + float: right; + margin-left: 2em; + } + + &.wp-align-left > *, + &.wp-align-right > * { + // Without z-index, won't be clickable as "above" adjacent content. + z-index: z-index(".block-editor-block-list__block {core/image aligned left or right}"); + } + + &.wp-align-center { + // Same as no alignment? + } +}