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
This commit is contained in:
Joshua T Flowers
GitHub
parent
d6931f316e
commit
353e01eb65
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.545 14.4296L13.9351 20.0409C13.7898 20.1865 13.6172 20.3019 13.4272 20.3807C13.2373 20.4595 13.0336 20.5 12.828 20.5C12.6224 20.5 12.4187 20.4595 12.2288 20.3807C12.0388 20.3019 11.8662 20.1865 11.7209 20.0409L5 13.3261V5.5H12.8241L19.545 12.2226C19.8364 12.5159 20 12.9126 20 13.3261C20 13.7396 19.8364 14.1363 19.545 14.4296V14.4296Z" stroke="#1E1E1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="9" cy="9.5" r="1" fill="#1E1E1E"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 585 B |
|
|
@ -1,7 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" view-box="0 0 24 24">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5 5.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 9.232A2 2 0 013 7.5V6a2 2 0 012-2h14a2 2 0 012 2v1.5a2 2 0 01-1 1.732V18a2 2 0 01-2 2H6a2 2 0 01-2-2V9.232zm1.5.268V18a.5.5 0 00.5.5h12a.5.5 0 00.5-.5V9.5h-13z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 371 B |
|
|
@ -1,14 +0,0 @@
|
|||
<svg view-box="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M19 5H5C4.72386 5 4.5 5.22386 4.5 5.5V19.5C4.5 19.7761 4.72386 20 5 20H19C19.2761 20 19.5 19.7761 19.5 19.5V5.5C19.5 5.22386 19.2761 5 19 5ZM5 3.5C3.89543 3.5 3 4.39543 3 5.5V19.5C3 20.6046 3.89543 21.5 5 21.5H19C20.1046 21.5 21 20.6046 21 19.5V5.5C21 4.39543 20.1046 3.5 19 3.5H5Z"
|
||||
fill="#1E1E1E"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M15.4772 10.9623C15.7683 10.6792 16.2317 10.6792 16.5228 10.9623L20.5228 14.8511L19.4772 15.9266L16 12.546L12.5228 15.9266C12.2719 16.1706 11.8857 16.2086 11.5921 16.0183L8.59643 14.0766L4.44186 17.106L3.55811 15.894L8.12953 12.5607C8.38061 12.3776 8.71858 12.3683 8.97934 12.5373L11.906 14.4342L15.4772 10.9623Z"
|
||||
fill="#1E1E1E"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 820 B |
|
|
@ -1,8 +0,0 @@
|
|||
<svg view-box="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M6 6H18C18.2761 6 18.5 6.22386 18.5 6.5V13.5H15.5H14C14 14.6046 13.1046 15.5 12 15.5C10.8954 15.5 10 14.6046 10 13.5H8.5H5.5V6.5C5.5 6.22386 5.72386 6 6 6ZM5.5 15V18.5C5.5 18.7761 5.72386 19 6 19H18C18.2761 19 18.5 18.7761 18.5 18.5V15H15.1632C14.6015 16.1825 13.3962 17 12 17C10.6038 17 9.39855 16.1825 8.83682 15H5.5ZM4 13.5V6.5C4 5.39543 4.89543 4.5 6 4.5H18C19.1046 4.5 20 5.39543 20 6.5V13.5V15V18.5C20 19.6046 19.1046 20.5 18 20.5H6C4.89543 20.5 4 19.6046 4 18.5V15V13.5Z"
|
||||
fill="#1E1E1E"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 625 B |
|
|
@ -1,7 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" view-box="0 0 24 24">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M16.83 6.342l.602.3.625-.25.443-.176v12.569l-.443-.178-.625-.25-.603.301-1.444.723-2.41-.804-.475-.158-.474.158-2.41.803-1.445-.722-.603-.3-.625.25-.443.177V6.215l.443.178.625.25.603-.301 1.444-.722 2.41.803.475.158.474-.158 2.41-.803 1.445.722zM20 4l-1.5.6-1 .4-2-1-3 1-3-1-2 1-1-.4L5 4v17l1.5-.6 1-.4 2 1 3-1 3 1 2-1 1 .4 1.5.6V4zm-3.5 6.25v-1.5h-8v1.5h8zm0 3v-1.5h-8v1.5h8zm-8 3v-1.5h8v1.5h-8z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 527 B |
|
|
@ -1,8 +0,0 @@
|
|||
<svg view-box="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M3.5 7.75C3.5 6.7835 4.2835 6 5.25 6H14.75H15.5V6.75V9H17.25H17.5607L17.7803 9.21967L20.7803 12.2197L21 12.4393V12.75V14.75C21 15.7165 20.2165 16.5 19.25 16.5H19.2377C19.2458 16.5822 19.25 16.6656 19.25 16.75C19.25 18.1307 18.1307 19.25 16.75 19.25C15.3693 19.25 14.25 18.1307 14.25 16.75C14.25 16.6656 14.2542 16.5822 14.2623 16.5H14H10.2377C10.2458 16.5822 10.25 16.6656 10.25 16.75C10.25 18.1307 9.13071 19.25 7.75 19.25C6.36929 19.25 5.25 18.1307 5.25 16.75C5.25 16.6656 5.25418 16.5822 5.26234 16.5H4.25H3.5V15.75V7.75ZM14 15V9.75V9V7.5H5.25C5.11193 7.5 5 7.61193 5 7.75V15H5.96464C6.41837 14.5372 7.05065 14.25 7.75 14.25C8.44935 14.25 9.08163 14.5372 9.53536 15H14ZM18.5354 15H19.25C19.3881 15 19.5 14.8881 19.5 14.75V13.0607L16.9393 10.5H15.5V14.5845C15.8677 14.3717 16.2946 14.25 16.75 14.25C17.4493 14.25 18.0816 14.5372 18.5354 15ZM6.7815 16.5C6.76094 16.5799 6.75 16.6637 6.75 16.75C6.75 17.3023 7.19772 17.75 7.75 17.75C8.30228 17.75 8.75 17.3023 8.75 16.75C8.75 16.6637 8.73906 16.5799 8.7185 16.5C8.60749 16.0687 8.21596 15.75 7.75 15.75C7.28404 15.75 6.89251 16.0687 6.7815 16.5ZM15.7815 16.5C15.7609 16.5799 15.75 16.6637 15.75 16.75C15.75 17.3023 16.1977 17.75 16.75 17.75C17.3023 17.75 17.75 17.3023 17.75 16.75C17.75 16.6637 17.7391 16.5799 17.7185 16.5C17.7144 16.4841 17.7099 16.4683 17.705 16.4526C17.5784 16.0456 17.1987 15.75 16.75 15.75C16.284 15.75 15.8925 16.0687 15.7815 16.5Z"
|
||||
fill="#1E1E1E"
|
||||
/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Adjust styling based on internal styling feedback
|
||||
|
|
@ -45,7 +45,7 @@ export function Edit( { attributes }: { attributes: BlockAttributes } ) {
|
|||
<span className="woocommerce-product-form__checkbox-tooltip-icon">
|
||||
<Icon
|
||||
icon={ help }
|
||||
size={ 20 }
|
||||
size={ 22 }
|
||||
fill="#949494"
|
||||
/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,9 +14,6 @@
|
|||
"description": {
|
||||
"type": "string",
|
||||
"__experimentalRole": "content"
|
||||
},
|
||||
"icon": {
|
||||
"type": "object"
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div { ...blockProps }>
|
||||
<h2 className="wp-block-woocommerce-product-section__title">
|
||||
<BlockIcon clientId={ clientId } />
|
||||
<span>{ title }</span>
|
||||
</h2>
|
||||
{ description && (
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,10 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 128px;
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.components-input-control {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: update
|
||||
|
||||
Remove icons from product editor template
|
||||
|
|
@ -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' => '<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="9.91663" y1="16.5" x2="9.91663" y2="1.38889" stroke="#1E1E1E" stroke-width="1.5"/><line x1="5.47217" y1="16.5" x2="5.47217" y2="1.38889" stroke="#1E1E1E" stroke-width="1.5"/><line x1="13.3334" y1="1.25" x2="4.44448" y2="1.25" stroke="#1E1E1E" stroke-width="1.5"/><path d="M4.13889 5.38889V9.46C2.21109 9.10713 0.75 7.41864 0.75 5.38889C0.75 3.35914 2.21109 1.67065 4.13889 1.31778V5.38889Z" fill="#1E1E1E" stroke="#1E1E1E" stroke-width="1.5"/></svg>',
|
||||
),
|
||||
),
|
||||
array(
|
||||
array(
|
||||
|
|
@ -309,9 +303,6 @@ class Init {
|
|||
'<a href="http://woocommerce.com/#" target="_blank" rel="noreferrer">',
|
||||
'</a>'
|
||||
),
|
||||
'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 {
|
|||
'<a href="https://woocommerce.com/document/managing-product-taxonomies/#product-attributes" target="_blank" rel="noreferrer">',
|
||||
'</a>'
|
||||
),
|
||||
'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 {
|
|||
'<a href="https://woocommerce.com/posts/how-to-price-products-strategies-expert-tips/" target="_blank" rel="noreferrer">',
|
||||
'</a>'
|
||||
),
|
||||
'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 {
|
|||
'<a href="' . admin_url( 'admin.php?page=wc-settings&tab=products§ion=inventory' ) . '" target="_blank" rel="noreferrer">',
|
||||
'</a>'
|
||||
),
|
||||
'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 {
|
|||
'<a href="https://woocommerce.com/posts/how-to-calculate-shipping-costs-for-your-woocommerce-store/" target="_blank" rel="noreferrer">',
|
||||
'</a>'
|
||||
),
|
||||
'icon' => array(
|
||||
'src' => plugins_url( '/assets/client/admin/product-editor/icons/section_shipping.svg', WC_PLUGIN_FILE ),
|
||||
),
|
||||
),
|
||||
array(
|
||||
array(
|
||||
|
|
|
|||
Loading…
Reference in New Issue