From ac20996ed0412731675b4c2ea585b0c685d3804b Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Fri, 17 Apr 2026 15:53:59 +0300 Subject: [PATCH 1/2] Fix: update snippet add/edit screen markup & headings structure --- src/css/edit.scss | 16 +++--- src/css/edit/_form.scss | 13 +++-- src/css/edit/_gpt.scss | 8 +++ src/css/edit/_sidebar.scss | 51 ++++++++----------- .../ConditionModal/ConditionModalButton.tsx | 12 ++--- .../EditorSidebar/actions/ShortcodeInfo.tsx | 25 +++++---- .../controls/ActivationSwitch.tsx | 36 ++++++------- .../EditorSidebar/controls/LockControl.tsx | 24 ++++----- .../controls/MultisiteSharingSettings.tsx | 36 ++++++------- .../EditorSidebar/controls/PriorityInput.tsx | 10 ++-- .../EditorSidebar/controls/RTLControl.tsx | 8 ++- .../SnippetForm/fields/CodeEditor.tsx | 4 +- .../SnippetForm/fields/DescriptionEditor.tsx | 8 ++- .../EditMenu/SnippetForm/fields/NameInput.tsx | 3 +- .../fields/SnippetLocationInput.tsx | 5 +- .../SnippetForm/fields/TagsEditor.tsx | 4 +- .../EditMenu/SnippetForm/page/PageHeading.tsx | 4 +- src/js/components/common/UpsellBanner.tsx | 8 ++- 18 files changed, 141 insertions(+), 134 deletions(-) diff --git a/src/css/edit.scss b/src/css/edit.scss index 5933ad11..a99b100e 100644 --- a/src/css/edit.scss +++ b/src/css/edit.scss @@ -34,6 +34,12 @@ } .snippet-description-container { + label { + font-size: 1.16em; + font-weight: 600; + text-transform: unset; + } + .wp-editor-tools { padding-block-start: 5px; } @@ -59,11 +65,6 @@ } } -#titlediv, -.snippet-type-container { - margin-block-end: 24px; -} - .above-snippet-code { margin-block: 0 15px; display: flex; @@ -71,8 +72,9 @@ margin-inline: 0; gap: 8px; - h2 { - margin: 0; + label { + font-size: 1.16em; + font-weight: 600; } .expand-editor-button { diff --git a/src/css/edit/_form.scss b/src/css/edit/_form.scss index 18ea2666..19a50806 100644 --- a/src/css/edit/_form.scss +++ b/src/css/edit/_form.scss @@ -19,10 +19,6 @@ $sidebar-gap: 30px; .small-badge { margin-inline-start: 0.5em; } - - .badge { - float: inline-end; - } } @@ -32,7 +28,7 @@ $sidebar-gap: 30px; display: flex; align-items: center; gap: 8px; - overflow: hidden; + flex: 1; border-color: #ccc; padding-block: 6px; padding-inline: 12px; @@ -71,6 +67,13 @@ $sidebar-gap: 30px; grid-area: lower; } + .snippet-form-upper, + .snippet-form-lower { + display: flex; + flex-flow: column; + gap: 24px; + } + .snippet-editor-sidebar { grid-area: span 3 / sidebar; max-inline-size: $sidebar-width; diff --git a/src/css/edit/_gpt.scss b/src/css/edit/_gpt.scss index 2caa70f4..00778816 100644 --- a/src/css/edit/_gpt.scss +++ b/src/css/edit/_gpt.scss @@ -32,6 +32,14 @@ } } +.snippet-tags-container { + label { + font-size: 1.16em; + font-weight: 600; + text-transform: unset; + } +} + .code-line-explanation { display: flex; cursor: default; diff --git a/src/css/edit/_sidebar.scss b/src/css/edit/_sidebar.scss index b7805c5d..0ba8c56a 100644 --- a/src/css/edit/_sidebar.scss +++ b/src/css/edit/_sidebar.scss @@ -1,23 +1,30 @@ @use '../common/theme'; -.snippet-priority input { - inline-size: 4em; +.snippet-priority { + .priority-input-tooltip { + margin-inline-end: auto; + } + + input { + inline-size: 4em; + } } .activation-switch-container, .lock-control-container { + inline-size: 100%; + display: flex; + flex-flow: row; + gap: 5px; + justify-content: center; + align-items: center; + label { - display: flex; - flex-flow: row; - gap: 5px; - justify-content: center; - align-items: center; + font-weight: 600; } -} -.code-snippets-modal { - p h4 { - margin-block-start: 0; + span:first-of-type { + margin-inline-start: auto; } } @@ -67,21 +74,13 @@ flex-flow: column; gap: 1em; - h4 { - margin-block: 0.5em; - margin-inline: 0; - } - .inline-form-field { display: flex; flex-flow: row wrap; + justify-content: space-between; align-items: center; gap: 5px; - label:last-of-type, input:last-of-type { - margin-inline-start: auto; - } - &.lock-control-container { border-block-start: 1px solid #eee; padding-block-start: 1em; @@ -101,23 +100,17 @@ flex-flow: column; gap: 4px; - h4 { - margin-block-end: 0; - } } } - h4 .badge { - float: inline-end; - - + .badge { - margin-inline-end: 5px; - } + label { + font-weight: 600; } .beta-badge { color: theme.$accent; border: 1px solid currentcolor; + margin-inline-start: auto; } .components-form-token-field { diff --git a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx index 531eb8fc..7d1eaaa4 100644 --- a/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx +++ b/src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx @@ -18,14 +18,14 @@ export const ConditionModalButton: React.FC = ({ setI const hasCondition = 0 !== snippet.conditionId return ( -
+
{isCondition(snippet) ? null : <> -

- {__('Conditions', 'code-snippets')} - {__('beta', 'code-snippets')} - {!isLicensed() && {__('Pro', 'code-snippets')}} -

+ {__('Conditions', 'code-snippets')} + + {__('beta', 'code-snippets')} + + {!isLicensed() && {__('Pro', 'code-snippets')}} diff --git a/src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx b/src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx index 64078c07..9a8ce7ca 100644 --- a/src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx +++ b/src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx @@ -10,29 +10,29 @@ export const ActivationSwitch = () => { return (
-

{__('Status')}

+ - + { + submitSnippet( + { id: snippet.id, network: snippet.network, active: !snippet.active }, + snippet.active ? SubmitSnippetAction.SAVE_AND_DEACTIVATE : SubmitSnippetAction.SAVE_AND_ACTIVATE + ) + .then(() => undefined) + .catch(handleUnknownError) + }} + />
) } diff --git a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx index b0af33ec..7bc564e1 100644 --- a/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx +++ b/src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx @@ -26,24 +26,24 @@ export const LockControl: React.FC = () => { return (
-

{__('Lock snippet', 'code-snippets')}

+ {__('Mark this snippet as read-only to prevent accidental changes or deletion.', 'code-snippets')} - + + +
) } diff --git a/src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx b/src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx index be8dbc4f..25517361 100644 --- a/src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx +++ b/src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx @@ -8,34 +8,34 @@ export const MultisiteSharingSettings: React.FC = () => { return (
-

+

+ {__('Instead of running on every site, allow this snippet to be activated on individual sites on the network.', 'code-snippets')} - + + setSnippet(previous => ({ + ...previous, + active: false, + shared_network: event.target.checked + }))} + />
) } diff --git a/src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx b/src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx index 455d918c..657ae91f 100644 --- a/src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx +++ b/src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx @@ -8,13 +8,11 @@ export const PriorityInput = () => { return (
-

- -

+ - + {__('Snippets with a lower priority number will run before those with a higher number.', 'code-snippets')} diff --git a/src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx b/src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx index be8c1977..67f1b6ba 100644 --- a/src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx +++ b/src/js/components/EditMenu/EditorSidebar/controls/RTLControl.tsx @@ -7,11 +7,9 @@ export const RTLControl: React.FC = () => { return (
-

- -

+ { return isCondition(snippet) ? null :
-

+ +