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

Blocks: update warning style #7866

Merged
merged 7 commits into from
Jul 24, 2018
Merged

Blocks: update warning style #7866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
745c013
Block warning: restyle and move buttons inline with message
johngodley Jul 10, 2018
c7ee23b
Block warning: restyle and move buttons inline with message
johngodley Jul 11, 2018
0ebaf1d
Blocks: move BlockCrash down a level
johngodley Jul 10, 2018
3f2435b
Blocks: rename InvalidBlock to BlockInvalid
johngodley Jul 10, 2018
9192973
Polish the warning message.
johngodley Jul 11, 2018
db48521
Polish mobile and wrapping paddings.
jasmussen Jul 6, 2018
d531fb9
Block: change ‘edit as HTML’ text
johngodley Jul 10, 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
2 changes: 1 addition & 1 deletion edit-post/assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ $z-layers: (
'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
'.freeform-toolbar': 10,
'.editor-block-list__breadcrumb': 1,
'.editor-warning': 1,
'.components-form-toggle__input': 1,
'.editor-inserter__tabs': 1,
'.editor-inserter__tab.is-active': 1,
Expand All @@ -21,6 +20,7 @@ $z-layers: (
'.components-popover__close': 5,
'.editor-block-list__insertion-point': 5,
'.editor-inserter-with-shortcuts': 5,
'.editor-warning': 6,
'.core-blocks-gallery-item__inline-menu': 20,
'.editor-url-input__suggestions': 30,
'.edit-post-header': 30,
Expand Down
8 changes: 4 additions & 4 deletions ...nents/block-list/invalid-block-warning.js → ...nents/block-list/block-invalid-warning.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { withDispatch } from '@wordpress/data';
*/
import Warning from '../warning';

function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) {
const hasHTMLBlock = !! getBlockType( 'core/html' );

return (
Expand All @@ -26,12 +26,12 @@ function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
</Button>,
hasHTMLBlock && (
<Button key="edit" onClick={ convertToHTML } isLarge isPrimary>
{ __( 'Edit as HTML' ) }
{ __( 'Keep as HTML' ) }
</Button>
),
] }
>
{ __( 'This block appears to have been modified externally.' ) }
{ __( 'This block has been modified externally.' ) }
</Warning>
);
}
Expand All @@ -51,4 +51,4 @@ export default withDispatch( ( dispatch, { block } ) => {
} ) );
},
};
} )( InvalidBlockWarning );
} )( BlockInvalidWarning );
6 changes: 3 additions & 3 deletions editor/components/block-list/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import BlockEdit from '../block-edit';
import BlockMover from '../block-mover';
import BlockDropZone from '../block-drop-zone';
import BlockSettingsMenu from '../block-settings-menu';
import InvalidBlockWarning from './invalid-block-warning';
import BlockInvalidWarning from './block-invalid-warning';
import BlockCrashWarning from './block-crash-warning';
import BlockCrashBoundary from './block-crash-boundary';
import BlockHtml from './block-html';
Expand Down Expand Up @@ -541,7 +541,7 @@ export class BlockListBlock extends Component {
<div key="invalid-preview">
{ getSaveElement( blockType, block.attributes ) }
</div>,
<InvalidBlockWarning
<BlockInvalidWarning
key="invalid-warning"
block={ block }
/>,
Expand All @@ -553,8 +553,8 @@ export class BlockListBlock extends Component {
clientId={ clientId }
/>
) }
{ !! error && <BlockCrashWarning /> }
</IgnoreNestedEvents>
{ !! error && <BlockCrashWarning /> }
{ showEmptyBlockSideInserter && (
<Fragment>
<div className="editor-block-list__side-inserter">
Expand Down
42 changes: 29 additions & 13 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
left: 0;
visibility: hidden;

// use opacity to work in various editor styles
// Use opacity to work in various editor styles.
background-color: $dark-opacity-light-200;

.is-dark-theme & {
Expand Down Expand Up @@ -223,7 +223,7 @@
// Selected style
&.is-selected-parent > .editor-block-list__block-edit:before,
&.is-selected > .editor-block-list__block-edit:before {
// use opacity to work in various editor styles
// Use opacity to work in various editor styles.
outline: $border-width solid $dark-opacity-light-500;

.is-dark-theme & {
Expand Down Expand Up @@ -259,7 +259,7 @@
&.is-multi-selected .editor-block-list__block-edit:before {
background: $blue-medium-highlight;

// use opacity to work in various editor styles
// Use opacity to work in various editor styles.
mix-blend-mode: multiply;

// Collapse extra vertical padding on selection
Expand All @@ -278,26 +278,42 @@
*/

.editor-block-list__layout .editor-block-list__block {
&.has-warning {
min-height: $block-padding + $block-spacing;
}

// Warnings
&.has-warning .editor-block-list__block-edit {
min-height: 250px;

&.has-warning .editor-block-list__block-edit {
> :not( .editor-warning ) {
pointer-events: none;
user-select: none;
}
}

&.has-warning:not( .is-hovered ) .editor-block-list__block-edit:before {
// Use opacity to work in various editor styles.
outline-color: $dark-opacity-light-500;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
}
}

&.has-warning .editor-block-list__block-edit:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba( $white, 0.6 );
background-image: linear-gradient( to bottom, transparent, $white );
background-color: rgba( $light-gray-100, .8 );

top: -$block-padding;
bottom: -$block-padding;
right: -$parent-block-padding;
left: -$parent-block-padding;

// Position for nested blocks
.editor-block-list__block & {
right: -$block-padding;
left: -$block-padding;
}
}

// Appender
Expand All @@ -314,7 +330,7 @@

// Shared blocks
&.is-shared > .editor-block-list__block-edit:before {
// use opacity to work in various editor styles
// Use opacity to work in various editor styles.
outline: $border-width dashed $dark-opacity-light-500;

.is-dark-theme & {
Expand Down
23 changes: 13 additions & 10 deletions editor/components/warning/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,19 @@ import './style.scss';
function Warning( { actions, children } ) {
return (
<div className="editor-warning">
{ children }
{ Children.count( actions ) > 0 && (
<div className="editor-warning__actions">
{ Children.map( actions, ( action, i ) => (
<span key={ i } className="editor-warning__action">
{ action }
</span>
) ) }
</div>
) }
<div className="editor-warning__contents">
<p className="editor-warning__message">{ children }</p>

{ Children.count( actions ) > 0 && (
<div className="editor-warning__actions">
{ Children.map( actions, ( action, i ) => (
<span key={ i } className="editor-warning__action">
{ action }
</span>
) ) }
</div>
) }
</div>
</div>
);
}
Expand Down
66 changes: 46 additions & 20 deletions editor/components/warning/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,53 @@
.editor-warning {
.editor-block-list__block .editor-warning {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mentioned at #7886 (comment) that this component is used for more than just the warning for the single block in a list. It's also used for the top-level error handler, which this change broke. See #8677.

z-index: z-index( '.editor-warning' );
position: absolute;
top: 0;
top: -$block-padding - $border-width;
right: -$parent-block-padding - $border-width;
left: -$parent-block-padding - $border-width;

// Position for nested blocks
.editor-block-list__block & {
right: -$block-padding - $border-width;
left: -$block-padding - $border-width;
}

display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
max-width: 780px;
width: calc( 100% - #{ $parent-block-padding * 2 + $block-padding * 2 } );
padding: 20px;
flex-direction: row;
justify-content: space-between;
flex-wrap: nowrap;
background-color: $white;
border: 1px solid $light-gray-500;
text-align: center;
line-height: $default-line-height;
font-family: $default-font;
font-size: $default-font-size;
}
text-align: left;

.editor-warning__actions {
display: flex;
margin-top: 20px;
}
// Bigger padding on mobile where blocks are edge to edge.
padding: $block-padding $parent-block-padding 0 $parent-block-padding;
@include break-small() {
padding: $block-padding $block-padding 0 $block-padding;
}

.editor-warning__message {
line-height: $default-line-height;
font-family: $default-font;
font-size: $default-font-size;
margin: 0 0 $block-padding 0;
}

.editor-warning__contents {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
width: 100%;
}

.editor-warning__action {
margin: 0 #{ $item-spacing / 2 } 5px;
}
.editor-warning__actions {
display: flex;
margin: 0 0 $block-padding 0;
}

.editor-warning__action {
margin: 0 6px 0 0;
margin-left: 0;
}
}
10 changes: 9 additions & 1 deletion editor/components/warning/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ exports[`Warning should match snapshot 1`] = `
<div
className="editor-warning"
>
error
<div
className="editor-warning__contents"
>
<p
className="editor-warning__message"
>
error
</p>
</div>
</div>
`;