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

Move the block settings menu to the block toolbar #9572

Merged
merged 13 commits into from
Sep 5, 2018
Merged

Move the block settings menu to the block toolbar #9572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
885fda9
Move the block settings menu to the block toolbar
youknowriad Sep 3, 2018
3278304
Fix the multiselection block settings menu
youknowriad Sep 3, 2018
4bbede3
Simplify styling of block toolbars
youknowriad Sep 4, 2018
22a8297
Focus toolbar on multi selection
youknowriad Sep 4, 2018
264010f
Open menu to the right
youknowriad Sep 4, 2018
ae2ecac
Fix unit tests
youknowriad Sep 4, 2018
72b2eab
Fix e2e tests
youknowriad Sep 4, 2018
ae7b70f
Refactor block keyboard shortcuts to fix e2e tests
youknowriad Sep 4, 2018
c4a37dd
Fix the block inspector's styling
youknowriad Sep 4, 2018
21b2caa
Fix small error causing the UI go go wild :P
youknowriad Sep 5, 2018
4dc86fe
Restore the block settings menu for invalid blocks
youknowriad Sep 5, 2018
3a4178a
Restore the block toolbar for the classic block
youknowriad Sep 5, 2018
3ed790f
Try fix for ellipsis button on Classic.
Sep 5, 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
21 changes: 15 additions & 6 deletions block-library/freeform/editor.scss
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
92 changes: 45 additions & 47 deletions edit-post/components/header/more-menu/test/__snapshots__/index.js.snap
View file
Open in desktop
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
96 changes: 46 additions & 50 deletions edit-post/components/sidebar/plugin-post-publish-panel/test/__snapshots__/index.js.snap
View file
Open in desktop
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>
`;
20 changes: 8 additions & 12 deletions edit-post/components/sidebar/plugin-post-status-info/test/__snapshots__/index.js.snap
View file
Open in desktop
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