Skip to content

Commit

Permalink
Move the block settings menu to the block toolbar (#9572)
Browse files Browse the repository at this point in the history
* Move the block settings menu to the block toolbar

* Fix the multiselection block settings menu

* Simplify styling of block toolbars

* Focus toolbar on multi selection

* Open menu to the right

* Fix unit tests

* Fix e2e tests

* Refactor block keyboard shortcuts to fix e2e tests

* Fix the block inspector's styling

* Fix small error causing the UI go go wild :P

* Restore the block settings menu for invalid blocks

* Restore the block toolbar for the classic block

* Try fix for ellipsis button on Classic.
  • Loading branch information
youknowriad authored Sep 5, 2018
1 parent dfc5749 commit 2065011
Show file tree
Hide file tree
Showing 26 changed files with 524 additions and 531 deletions.
21 changes: 15 additions & 6 deletions block-library/freeform/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -119,18 +119,12 @@
outline: $border-width solid #e2e4e7;
}

// Don't show normal block toolbar
.editor-block-contextual-toolbar {
display: none;
}

// Don't show block type label for classic block
&.is-hovered .editor-block-list__breadcrumb {
display: none;
}
}


div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
margin-top: 0;
padding-top: 0;
Expand Down Expand Up @@ -187,3 +181,18 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
.freeform-toolbar.has-advanced-toolbar .mce-toolbar-grp .mce-toolbar {
display: block;
}

@include break-small() {
.editor-block-list__block[data-type="core/freeform"] {
.editor-block-contextual-toolbar {
float: right;
margin-right: -$block-padding - $block-side-ui-clearance - $border-width;
transform: translateY(-#{ $block-padding - $border-width });
top: $block-padding;
}

.mce-container.mce-toolbar.mce-stack-layout-item {
padding-right: $icon-button-size;
}
}
}
1 change: 0 additions & 1 deletion edit-post/assets/stylesheets/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ $z-layers: (
".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter

// Side UI active buttons
".editor-block-settings-remove": 1,
".editor-block-mover__control": 1,

// Active pill button
Expand Down
9 changes: 1 addition & 8 deletions edit-post/components/header/header-toolbar/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@
.edit-post-header-toolbar {
display: inline-flex;
align-items: center;

@include break-large() {
.editor-block-switcher .components-toolbar {
border-left: $border-width solid $light-gray-500;
}
}
}

// Block toolbar when fixed to the top of the screen.
Expand All @@ -30,13 +24,12 @@
border-bottom: $border-width solid $light-gray-500;

.editor-block-toolbar {
border-left: none;
margin: -9px 0;
}

.editor-block-toolbar .components-toolbar {
border-top: none;
border-bottom: none;
margin: -9px 0;
padding: 9px;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,51 @@ exports[`MoreMenu should match snapshot 1`] = `
<div
className="edit-post-more-menu"
>
<div>
<IconButton
aria-expanded={false}
icon="ellipsis"
label="More"
onClick={[Function]}
<IconButton
aria-expanded={false}
icon="ellipsis"
label="More"
onClick={[Function]}
>
<Tooltip
text="More"
>
<Tooltip
text="More"
<Button
aria-expanded={false}
aria-label="More"
className="components-icon-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<Button
<button
aria-expanded={false}
aria-label="More"
className="components-icon-button"
className="components-button components-icon-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
type="button"
>
<button
aria-expanded={false}
aria-label="More"
className="components-button components-icon-button"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
type="button"
<Dashicon
icon="ellipsis"
key="0,0"
>
<Dashicon
icon="ellipsis"
key="0,0"
<SVG
aria-hidden={true}
className="dashicon dashicons-ellipsis"
focusable="false"
height={20}
role="img"
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<SVG
<svg
aria-hidden={true}
className="dashicon dashicons-ellipsis"
focusable="false"
Expand All @@ -57,31 +66,20 @@ exports[`MoreMenu should match snapshot 1`] = `
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
className="dashicon dashicons-ellipsis"
focusable="false"
height={20}
role="img"
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
<Path
d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
>
<Path
<path
d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
>
<path
d="M5 10c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-7 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
/>
</Path>
</svg>
</SVG>
</Dashicon>
</button>
</Button>
</Tooltip>
</IconButton>
</div>
/>
</Path>
</svg>
</SVG>
</Dashicon>
</button>
</Button>
</Tooltip>
</IconButton>
</div>
</Dropdown>
</MoreMenu>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,68 +1,64 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PluginPostPublishPanel renders fill properly 1`] = `
<div
role="presentation"
<PanelBody
className="my-plugin-post-publish-panel"
initialOpen={true}
key="1---0/.0"
title="My panel title"
>
<PanelBody
className="my-plugin-post-publish-panel"
initialOpen={true}
key="1---0/.0"
title="My panel title"
<div
className="components-panel__body my-plugin-post-publish-panel is-opened"
>
<div
className="components-panel__body my-plugin-post-publish-panel is-opened"
<h2
className="components-panel__body-title"
>
<h2
className="components-panel__body-title"
<Button
aria-expanded={true}
className="components-panel__body-toggle"
onClick={[Function]}
>
<Button
<button
aria-expanded={true}
className="components-panel__body-toggle"
className="components-button components-panel__body-toggle"
onClick={[Function]}
type="button"
>
<button
aria-expanded={true}
className="components-button components-panel__body-toggle"
onClick={[Function]}
type="button"
<AccessibleSVG
className="components-panel__arrow"
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<AccessibleSVG
<svg
aria-hidden="true"
className="components-panel__arrow"
focusable="false"
height="24px"
role="img"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden="true"
className="components-panel__arrow"
focusable="false"
height="24px"
role="img"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
</g>
<g>
<path
d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
/>
</g>
</svg>
</AccessibleSVG>
My panel title
</button>
</Button>
</h2>
My panel content
</div>
</PanelBody>
</div>
<g>
<path
d="M0,0h24v24H0V0z"
fill="none"
/>
</g>
<g>
<path
d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z"
/>
</g>
</svg>
</AccessibleSVG>
My panel title
</button>
</Button>
</h2>
My panel content
</div>
</PanelBody>
`;
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PluginPostStatusInfo renders fill properly 1`] = `
<div
role="presentation"
<PanelRow
className="my-plugin-post-status-info"
key="1---0/.0"
>
<PanelRow
className="my-plugin-post-status-info"
key="1---0/.0"
<div
className="components-panel__row my-plugin-post-status-info"
>
<div
className="components-panel__row my-plugin-post-status-info"
>
My plugin post status info
</div>
</PanelRow>
</div>
My plugin post status info
</div>
</PanelRow>
`;
Loading

0 comments on commit 2065011

Please sign in to comment.