From 3e57ffdb824b0a313cfbebf812db5ce1bb068d2a Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Thu, 3 Sep 2020 08:38:53 +0200
Subject: [PATCH] Add reusable block icon. (#23552)
* Add reusable block icon.
* Move external link icon to the right.
Needs a follow up in one of the PRs in #24539.
* Update checkmark.
Fixes #23185.
* Allow both shortcuts and icons.
* Update snapshots.
* Optically balance more.
* Add download icon, use for "Export".
* Update snaps again.
---
.../test/__snapshots__/control.js.snap | 2 +-
.../src/components/preview-options/style.scss | 4 +-
.../test/__snapshots__/index.js.snap | 6 +--
.../components/src/dropdown-menu/style.scss | 11 ++---
packages/components/src/menu-group/style.scss | 3 +-
packages/components/src/menu-item/index.js | 3 +-
packages/components/src/menu-item/style.scss | 15 +++---
.../test/__snapshots__/index.js.snap | 48 ++++++++++---------
.../src/menu-items-choice/style.scss | 6 +--
.../src/components/device-preview/index.js | 2 +-
.../src/components/header/style.scss | 2 +-
.../enable-custom-fields.js.snap | 4 +-
packages/edit-site/src/plugins/index.js | 3 +-
.../reusable-block-convert-button.js | 2 +
packages/icons/src/index.js | 4 +-
packages/icons/src/library/check.js | 2 +-
packages/icons/src/library/download.js | 12 +++++
packages/icons/src/library/reusable-block.js | 12 +++++
18 files changed, 83 insertions(+), 58 deletions(-)
create mode 100644 packages/icons/src/library/download.js
create mode 100644 packages/icons/src/library/reusable-block.js
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 7c4d34cdb3a88..e8346eb4abace 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -66,7 +66,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
diff --git a/packages/block-editor/src/components/preview-options/style.scss b/packages/block-editor/src/components/preview-options/style.scss
index b9afabcce40f1..5fa1cd0253718 100644
--- a/packages/block-editor/src/components/preview-options/style.scss
+++ b/packages/block-editor/src/components/preview-options/style.scss
@@ -28,9 +28,7 @@
}
.components-menu-group + .components-menu-group {
- padding: $grid-unit-10 $grid-unit-15;
- margin-left: -$grid-unit-15;
- margin-right: -$grid-unit-15;
+ padding: $grid-unit-10;
}
}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 52f9d901b71ae..b8d2298cd048d 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -357,7 +357,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
}
@@ -380,10 +380,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
index 2526b00b61e2d..ba2b12a7f6000 100644
--- a/packages/components/src/dropdown-menu/style.scss
+++ b/packages/components/src/dropdown-menu/style.scss
@@ -53,11 +53,12 @@
.components-menu-item__button.components-button {
min-height: $button-size;
height: auto;
- padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
text-align: left;
+ padding-left: $grid-unit-10;
+ padding-right: $grid-unit-10;
- &.has-icon {
- padding-left: $grid-unit-10;
+ .components-menu-item__info-wrapper {
+ max-width: calc(100% - #{ $button-size-small + $grid-unit-10 });
}
}
@@ -87,7 +88,3 @@
}
}
}
-
-.components-dropdown-menu__menu.no-icons .components-menu-item__button.components-button {
- padding: 0 $grid-unit-15;
-}
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
index 72fd95d66588a..10a54c7324f26 100644
--- a/packages/components/src/menu-group/style.scss
+++ b/packages/components/src/menu-group/style.scss
@@ -5,7 +5,8 @@
}
.components-menu-group__label {
- padding: 0;
+ padding: 0 $grid-unit-10;
+ margin-top: $grid-unit-05;
margin-bottom: $grid-unit-15;
color: $gray-700;
text-transform: uppercase;
diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
index ccd02dbe8af02..d685606102669 100644
--- a/packages/components/src/menu-item/index.js
+++ b/packages/components/src/menu-item/index.js
@@ -14,6 +14,7 @@ import { cloneElement, forwardRef } from '@wordpress/element';
*/
import Shortcut from '../shortcut';
import Button from '../button';
+import Icon from '../icon';
/**
* Renders a generic menu item for use inside the more menu.
@@ -63,7 +64,6 @@ export function MenuItem(
return (
+ { icon && }
);
}
diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
index de8b24b397bff..29aa0570d28a3 100644
--- a/packages/components/src/menu-item/style.scss
+++ b/packages/components/src/menu-item/style.scss
@@ -2,19 +2,16 @@
.components-menu-item__button.components-button {
width: 100%;
- // Target plugin icons that can have arbitrary classes by using an aggressive selector.
- // @todo: is this still necessary?
- .dashicon,
- .components-menu-items__item-icon,
- svg.components-menu-items__item-icon,
- > span > svg {
- margin-right: $grid-unit-10;
- }
-
.components-menu-items__item-icon {
+ margin-right: -2px; // This optically balances the icon.
+ margin-left: auto;
display: inline-block;
flex: 0 0 auto;
}
+
+ .components-menu-item__shortcut + .components-menu-items__item-icon {
+ margin-left: $grid-unit-10;
+ }
}
.components-menu-item__info-wrapper {
diff --git a/packages/components/src/menu-item/test/__snapshots__/index.js.snap b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
index 7f52fcbf03f5c..e2a9fb4bd470b 100644
--- a/packages/components/src/menu-item/test/__snapshots__/index.js.snap
+++ b/packages/components/src/menu-item/test/__snapshots__/index.js.snap
@@ -4,17 +4,6 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
-
-
- }
onClick={[Function]}
role="menuitemcheckbox"
>
@@ -23,6 +12,19 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
className="components-menu-item__shortcut"
shortcut="mod+shift+alt+w"
/>
+
+
+
+ }
+ />
`;
@@ -50,17 +52,6 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
-
-
- }
onClick={[Function]}
role="menuitem"
>
@@ -69,6 +60,19 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
className="components-menu-item__shortcut"
shortcut="mod+shift+alt+w"
/>
+
+
+
+ }
+ />
`;
diff --git a/packages/components/src/menu-items-choice/style.scss b/packages/components/src/menu-items-choice/style.scss
index 182f898471939..5de8363be0d6e 100644
--- a/packages/components/src/menu-items-choice/style.scss
+++ b/packages/components/src/menu-items-choice/style.scss
@@ -1,12 +1,10 @@
.components-menu-items-choice,
.components-menu-items-choice.components-button {
- padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10;
-
svg {
- margin-right: $grid-unit-10;
+ margin-right: $grid-unit-15;
}
&.has-icon {
- padding-left: $grid-unit-10;
+ padding-left: $grid-unit-15;
}
}
diff --git a/packages/edit-post/src/components/device-preview/index.js b/packages/edit-post/src/components/device-preview/index.js
index 07142b086b3c5..742790caf0a24 100644
--- a/packages/edit-post/src/components/device-preview/index.js
+++ b/packages/edit-post/src/components/device-preview/index.js
@@ -47,8 +47,8 @@ export default function DevicePreview() {
forcePreviewLink={ isSaving ? null : undefined }
textContent={
<>
-
{ __( 'Preview in new tab' ) }
+
>
}
/>
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 931dcde9c9e39..54d48cd2841e1 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -107,7 +107,7 @@
justify-content: flex-start;
svg {
- margin-right: $grid-unit-10;
+ margin-left: auto;
}
}
diff --git a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
index eb27081e91dc8..018eb9e7c5f97 100644
--- a/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
+++ b/packages/edit-post/src/components/options-modal/options/test/__snapshots__/enable-custom-fields.js.snap
@@ -32,7 +32,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
xmlns="http://www.w3.org/2000/svg"
>
@@ -90,7 +90,7 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
xmlns="http://www.w3.org/2000/svg"
>
diff --git a/packages/edit-site/src/plugins/index.js b/packages/edit-site/src/plugins/index.js
index 436907cfdc697..f967726b94fcb 100644
--- a/packages/edit-site/src/plugins/index.js
+++ b/packages/edit-site/src/plugins/index.js
@@ -11,6 +11,7 @@ import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
import { addQueryArgs } from '@wordpress/url';
import apiFetch from '@wordpress/api-fetch';
+import { download } from '@wordpress/icons';
/**
* Internal dependencies
@@ -24,7 +25,7 @@ registerPlugin( 'edit-site', {