From 353e01eb65befd673b4c7c6a0dafb3a392c02f52 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Wed, 24 May 2023 07:11:00 -0700 Subject: [PATCH] Tweak typography and element spacing in product editor (#38351) * Update header font size * Remove icons from sections * Update radio block label and spacing * Make checkbox tooltips larger and vertically align * Update description colors * Update h4 font sizes in editor * Add changelog entry * Add core changelog entry * Handle initial design feedback * Remove copy of assets in client webpack config --- .../assets/icons/section_attributes.svg | 4 ---- .../assets/icons/section_basic.svg | 7 ------- .../assets/icons/section_images.svg | 14 ------------- .../assets/icons/section_inventory.svg | 8 ------- .../assets/icons/section_pricing.svg | 7 ------- .../assets/icons/section_shipping.svg | 8 ------- .../js/product-editor/changelog/update-38260 | 4 ++++ .../src/blocks/checkbox/edit.tsx | 2 +- .../src/blocks/checkbox/editor.scss | 3 +++ .../src/blocks/section/block.json | 3 --- .../src/blocks/section/edit.tsx | 3 --- .../src/blocks/section/editor.scss | 15 +++---------- .../src/components/block-editor/style.scss | 4 ++++ .../src/components/radio-field/style.scss | 9 ++++---- plugins/woocommerce-admin/webpack.config.js | 9 -------- plugins/woocommerce/changelog/update-38260 | 4 ++++ .../Features/ProductBlockEditor/Init.php | 21 ------------------- 17 files changed, 24 insertions(+), 101 deletions(-) delete mode 100644 packages/js/product-editor/assets/icons/section_attributes.svg delete mode 100644 packages/js/product-editor/assets/icons/section_basic.svg delete mode 100644 packages/js/product-editor/assets/icons/section_images.svg delete mode 100644 packages/js/product-editor/assets/icons/section_inventory.svg delete mode 100644 packages/js/product-editor/assets/icons/section_pricing.svg delete mode 100644 packages/js/product-editor/assets/icons/section_shipping.svg create mode 100644 packages/js/product-editor/changelog/update-38260 create mode 100644 plugins/woocommerce/changelog/update-38260 diff --git a/packages/js/product-editor/assets/icons/section_attributes.svg b/packages/js/product-editor/assets/icons/section_attributes.svg deleted file mode 100644 index b94fc16fc06..00000000000 --- a/packages/js/product-editor/assets/icons/section_attributes.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/js/product-editor/assets/icons/section_basic.svg b/packages/js/product-editor/assets/icons/section_basic.svg deleted file mode 100644 index cf6a84b463c..00000000000 --- a/packages/js/product-editor/assets/icons/section_basic.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/packages/js/product-editor/assets/icons/section_images.svg b/packages/js/product-editor/assets/icons/section_images.svg deleted file mode 100644 index e48e5cad220..00000000000 --- a/packages/js/product-editor/assets/icons/section_images.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - diff --git a/packages/js/product-editor/assets/icons/section_inventory.svg b/packages/js/product-editor/assets/icons/section_inventory.svg deleted file mode 100644 index 5f130b2abd6..00000000000 --- a/packages/js/product-editor/assets/icons/section_inventory.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/packages/js/product-editor/assets/icons/section_pricing.svg b/packages/js/product-editor/assets/icons/section_pricing.svg deleted file mode 100644 index 46e2ee12101..00000000000 --- a/packages/js/product-editor/assets/icons/section_pricing.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - diff --git a/packages/js/product-editor/assets/icons/section_shipping.svg b/packages/js/product-editor/assets/icons/section_shipping.svg deleted file mode 100644 index f7289a1f9c9..00000000000 --- a/packages/js/product-editor/assets/icons/section_shipping.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - diff --git a/packages/js/product-editor/changelog/update-38260 b/packages/js/product-editor/changelog/update-38260 new file mode 100644 index 00000000000..ff527f97de7 --- /dev/null +++ b/packages/js/product-editor/changelog/update-38260 @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Adjust styling based on internal styling feedback diff --git a/packages/js/product-editor/src/blocks/checkbox/edit.tsx b/packages/js/product-editor/src/blocks/checkbox/edit.tsx index 64655ac5d89..ff22d1d2335 100644 --- a/packages/js/product-editor/src/blocks/checkbox/edit.tsx +++ b/packages/js/product-editor/src/blocks/checkbox/edit.tsx @@ -45,7 +45,7 @@ export function Edit( { attributes }: { attributes: BlockAttributes } ) { diff --git a/packages/js/product-editor/src/blocks/checkbox/editor.scss b/packages/js/product-editor/src/blocks/checkbox/editor.scss index 472ffb521b5..4e295624fa8 100644 --- a/packages/js/product-editor/src/blocks/checkbox/editor.scss +++ b/packages/js/product-editor/src/blocks/checkbox/editor.scss @@ -3,6 +3,7 @@ .components-base-control__field { display: flex; + align-items: center; } .components-checkbox-control__label { @@ -11,6 +12,8 @@ &-tooltip-icon { margin: -2px 0 0 $gap-small; + display: flex; + align-items: center; } } diff --git a/packages/js/product-editor/src/blocks/section/block.json b/packages/js/product-editor/src/blocks/section/block.json index e915bab3cb9..0fc58c9243d 100644 --- a/packages/js/product-editor/src/blocks/section/block.json +++ b/packages/js/product-editor/src/blocks/section/block.json @@ -14,9 +14,6 @@ "description": { "type": "string", "__experimentalRole": "content" - }, - "icon": { - "type": "object" } }, "supports": { diff --git a/packages/js/product-editor/src/blocks/section/edit.tsx b/packages/js/product-editor/src/blocks/section/edit.tsx index 5169609191b..910d6ca5cfd 100644 --- a/packages/js/product-editor/src/blocks/section/edit.tsx +++ b/packages/js/product-editor/src/blocks/section/edit.tsx @@ -8,13 +8,11 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { BlockIcon } from '../../components/block-icon'; import { SectionBlockAttributes } from './types'; import { sanitizeHTML } from '../../utils/sanitize-html'; export function Edit( { attributes, - clientId, }: BlockEditProps< SectionBlockAttributes > ) { const blockProps = useBlockProps(); const { description, title } = attributes; @@ -22,7 +20,6 @@ export function Edit( { return (

- { title }

{ description && ( diff --git a/packages/js/product-editor/src/blocks/section/editor.scss b/packages/js/product-editor/src/blocks/section/editor.scss index b8469630403..51ef2351e6c 100644 --- a/packages/js/product-editor/src/blocks/section/editor.scss +++ b/packages/js/product-editor/src/blocks/section/editor.scss @@ -9,27 +9,18 @@ .wp-block-woocommerce-product-section__title { margin-top: 0; margin-bottom: 0; - font-size: 24px; + font-size: 20px; font-weight: 500; color: $gray-900; display: inline-flex; align-items: center; - - .block-editor-block-icon { - margin-right: 14px; - - > div { - display: flex; - align-items: center; - justify-content: center; - } - } } &__description { margin-top: $gap-small; font-size: 13px; - color: $gray-900; + color: $gray-700; + line-height: 1.5; } } diff --git a/packages/js/product-editor/src/components/block-editor/style.scss b/packages/js/product-editor/src/components/block-editor/style.scss index cfec1c5b370..538eacaea7b 100644 --- a/packages/js/product-editor/src/components/block-editor/style.scss +++ b/packages/js/product-editor/src/components/block-editor/style.scss @@ -41,6 +41,10 @@ margin-left: auto; margin-right: auto; padding-bottom: 128px; + + h4 { + font-size: 16px; + } } .components-input-control { diff --git a/packages/js/product-editor/src/components/radio-field/style.scss b/packages/js/product-editor/src/components/radio-field/style.scss index fe7ad92004d..0d2b2f0006c 100644 --- a/packages/js/product-editor/src/components/radio-field/style.scss +++ b/packages/js/product-editor/src/components/radio-field/style.scss @@ -6,18 +6,19 @@ display: block; line-height: 1.5; } - margin-bottom: $gap-large; + margin-bottom: $gap-small; } &__title { - font-size: 16px; - font-weight: 600; + font-size: 11px; + font-weight: 500; color: #1e1e1e; + text-transform: uppercase; } &__description { font-size: 13px; - color: #1e1e1e; + color: $gray-700; } .components-base-control__field > .components-v-stack { diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 6252874b4d9..e66e67f9477 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -205,15 +205,6 @@ const webpackConfig = { ], } ), - new CopyWebpackPlugin( { - patterns: [ - { - from: '../../packages/js/product-editor/assets', - to: './product-editor', - }, - ], - } ), - // React Fast Refresh. ! isProduction && isHot && new ReactRefreshWebpackPlugin(), diff --git a/plugins/woocommerce/changelog/update-38260 b/plugins/woocommerce/changelog/update-38260 new file mode 100644 index 00000000000..512942f54a6 --- /dev/null +++ b/plugins/woocommerce/changelog/update-38260 @@ -0,0 +1,4 @@ +Significance: minor +Type: update + +Remove icons from product editor template diff --git a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php index aed61808b12..3c694f28a12 100644 --- a/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php +++ b/plugins/woocommerce/src/Admin/Features/ProductBlockEditor/Init.php @@ -232,9 +232,6 @@ class Init { array( 'title' => __( 'Basic details', 'woocommerce' ), 'description' => __( 'This info will be displayed on the product page, category pages, social media, and search results.', 'woocommerce' ), - 'icon' => array( - 'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_basic.svg', WC_PLUGIN_FILE ), - ), ), array( array( @@ -289,9 +286,6 @@ class Init { array( 'title' => __( 'Description', 'woocommerce' ), 'description' => __( 'What makes this product unique? What are its most important features? Enrich the product page by adding rich content using blocks.', 'woocommerce' ), - 'icon' => array( - 'src' => '', - ), ), array( array( @@ -309,9 +303,6 @@ class Init { '', '' ), - 'icon' => array( - 'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_images.svg', WC_PLUGIN_FILE ), - ), ), array( array( @@ -347,9 +338,6 @@ class Init { '', '' ), - 'icon' => array( - 'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_attributes.svg', WC_PLUGIN_FILE ), - ), ), array( array( @@ -377,9 +365,6 @@ class Init { '', '' ), - 'icon' => array( - 'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_pricing.svg', WC_PLUGIN_FILE ), - ), ), array( array( @@ -500,9 +485,6 @@ class Init { '', '' ), - 'icon' => array( - 'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_inventory.svg', WC_PLUGIN_FILE ), - ), ), array( array( @@ -650,9 +632,6 @@ class Init { '', '' ), - 'icon' => array( - 'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_shipping.svg', WC_PLUGIN_FILE ), - ), ), array( array(