Move dropdowns from above snippet editor to sidebar.

Author: sheabunge

src/css/common/_upsell.scss

@@ -8,7 +8,7 @@
 	padding: 12px;
 	gap: 10px;
 	background: #fff;
-	border: 1px solid #c3c4c7;
+	border: 1px solid #ccc;
 	border-radius: 5px;
 
 	p {

src/css/edit.scss

@@ -48,22 +48,27 @@
 	}
 }
 
+#titlediv,
+.snippet-type-container {
+	margin-block-end: 24px;
+}
+
 .above-snippet-code {
+	margin-block: 0 15px;
 	display: flex;
 	align-items: center;
-	margin-block: 25px 15px;
 	margin-inline: 0;
 	gap: 8px;
 
 	h2 {
 		margin: 0;
-		margin-inline-end: auto;
 	}
 
 	.expand-editor-button {
 		display: flex;
 		gap: 5px;
 		align-items: center;
+		margin-inline-end: auto;
 
 		.dashicons {
 			inline-size: 18px;

src/css/edit/_form.scss

@@ -1,8 +1,14 @@
 @use '../common/theme';
 
-$sidebar-width: 280px;
+$sidebar-width: 321px;
 $sidebar-gap: 30px;
 
+.snippet-form #titlediv #title,
+.snippet-type-container {
+	border-color: #ccc;
+	block-size: 45px
+}
+
 .snippet-type-option {
 	display: flex;
 	align-items: center;
@@ -19,52 +25,39 @@ $sidebar-gap: 30px;
 }
 
 
-.conditions-editor-open .button.button-large {
-	font-weight: bold;
-	block-size: 100%;
-	display: flex;
-	align-items: center;
-	min-block-size: 45px;
-	gap: 5px;
-	overflow: hidden;
-
-	&.no-condition {
+.conditions-editor-open {
+	.button.button-large {
+		block-size: 100%;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		overflow: hidden;
 		border-color: #ccc;
-		background-color: #fff;;
-	}
+		padding-block: 6px;
+		padding-inline: 12px;
 
-	.badge {
-		margin-block: 3px;
-		margin-inline: 0;
-	}
-
-	.beta-badge {
-		margin-inline-start: auto;
-		border: 1px solid currentcolor;
+		.pro-badge {
+			margin-inline-start: auto;
+		}
 	}
 
-	.pro-badge {
-		color: currentcolor;
-		border: 1px solid currentcolor;
+	&.no-condition .cond-badge {
 		background: transparent;
-
-		@media screen and (width >= 1080px) and (width <= 1250px) {
-			display: none;
-		}
+		color: inherit;
+		border: 1px solid currentcolor;
 	}
 }
 
 .snippet-form {
 	margin-block-start: 10px;
-	max-inline-size: 1440px;
 	display: grid;
 	gap: $sidebar-gap;
 	grid-template-columns: 1fr $sidebar-width;
-	grid-template-areas: "upper sidebar" "lower sidebar";
+	grid-template-areas: 'upper sidebar' 'lower sidebar';
 	transition: all 700ms;
 
 	&.snippet-form-expanded {
-		grid-template-areas: "upper upper" "lower sidebar";
+		grid-template-areas: 'upper upper' 'lower sidebar';
 	}
 
 	.snippet-form-upper {
@@ -76,18 +69,14 @@ $sidebar-gap: 30px;
 	}
 
 	.snippet-editor-sidebar {
-		grid-area: sidebar;
+		grid-area: span 3 / sidebar;
 		max-inline-size: $sidebar-width;
 	}
 
 	@media (width <= 1024px) {
 		grid-template-columns: 1fr;
 	}
 
-	#titlediv #title {
-		block-size: 45px
-	}
-
 	h2, h3 {
 		margin-block: 25px 15px;
 		margin-inline: 0;
@@ -102,16 +91,3 @@ $sidebar-gap: 30px;
 		}
 	}
 }
-
-.above-editor-container {
-	display: flex;
-	flex-flow: row wrap;
-	gap: 1em;
-
-	> * {
-		flex: 1;
-		display: flex;
-		flex-flow: column;
-		min-inline-size: 180px;
-	}
-}

src/css/edit/_sidebar.scss

@@ -1,3 +1,5 @@
+@use '../common/theme';
+
 .snippet-editor-sidebar {
 	.button-large {
 		block-size: 48px;
@@ -44,7 +46,7 @@
 			margin-inline: 0;
 		}
 
-		> div {
+		.inline-form-field {
 			display: flex;
 			flex-flow: row wrap;
 			align-items: center;
@@ -54,6 +56,29 @@
 				margin-inline-start: auto;
 			}
 		}
+
+		.block-form-field {
+			display: flex;
+			flex-flow: column;
+			gap: 4px;
+
+			h4 {
+				margin-block-end: 0;
+			}
+		}
+	}
+
+	h4 .badge {
+		float: inline-end;
+
+		+ .badge {
+			margin-inline-end: 5px;
+		}
+	}
+
+	.beta-badge {
+		color: theme.$accent;
+		border: 1px solid currentcolor;
 	}
 
 	.components-form-token-field {

src/js/components/ConditionModal/ConditionModalButton.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { __ } from '@wordpress/i18n'
 import { isLicensed } from '../../utils/screen'
 import { isCondition } from '../../utils/snippets/snippets'
+import { Badge } from '../common/Badge'
 import { Button } from '../common/Button'
 import { useSnippetForm } from '../../hooks/useSnippetForm'
 import type { Dispatch, SetStateAction } from 'react'
@@ -17,24 +18,20 @@ export const ConditionModalButton: React.FC<ConditionModalButtonProps> = ({ setI
 	const hasCondition = 0 !== snippet.conditionId
 
 	return (
-		<div className={classnames('conditions-editor-open', hasCondition ? 'has-condition' : 'no-condition')}>
+		<div className={classnames('conditions-editor-open block-form-field', hasCondition ? 'has-condition' : 'no-condition')}>
 			{isCondition(snippet) ? null
 				: <>
-					<h3>{__('Conditions', 'code-snippets')}</h3>
+					<h4>
+						{__('Conditions', 'code-snippets')}
+						<Badge name="beta" small>{__('beta', 'code-snippets')}</Badge>
+						{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
+					</h4>
 
-					<Button
-						large
-						primary={hasCondition}
-						disabled={isReadOnly}
-						onClick={() => setIsDialogOpen(true)}
-					>
-						<span className="dashicons dashicons-randomize"></span>
+					<Button large disabled={isReadOnly} onClick={() => setIsDialogOpen(true)}>
+						<Badge name="cond" small />
 						{hasCondition
-							? __('Conditions', 'code-snippets')
-							: __('Set Conditions', 'code-snippets')}
-
-						<span className="badge beta-badge small-badge">{__('beta', 'code-snippets')}</span>
-						{!isLicensed() && <span className="badge pro-badge small-badge">{__('Pro', 'code-snippets')}</span>}
+							? __('Edit Conditions', 'code-snippets')
+							: __('Add Conditions', 'code-snippets')}
 					</Button>
 				</>}
 		</div>

src/js/components/EditorSidebar/EditorSidebar.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 import { Spinner } from '@wordpress/components'
 import { isRTL } from '@wordpress/i18n'
 import { useSnippetForm } from '../../hooks/useSnippetForm'
 import { isNetworkAdmin } from '../../utils/screen'
 import { getSnippetType, isCondition } from '../../utils/snippets/snippets'
+import { ConditionModalButton } from '../ConditionModal/ConditionModalButton'
+import { SnippetLocationInput } from '../SnippetForm/fields/SnippetLocationInput'
+import { SnippetTypeInput } from '../SnippetForm/fields/SnippetTypeInput'
 import { Notices } from '../SnippetForm/page/Notices'
 import { ShortcodeInfo } from './actions/ShortcodeInfo'
 import { MultisiteSharingSettings } from './controls/MultisiteSharingSettings'
@@ -15,24 +18,32 @@ import { PriorityInput } from './controls/PriorityInput'
 import { RTLControl } from './controls/RTLControl'
 import { TagsInput } from './controls/TagsInput'
 
-export const EditorSidebar = () => {
+export interface EditorSidebarProps {
+	setIsUpgradeDialogOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export const EditorSidebar: React.FC<EditorSidebarProps> = ({ setIsUpgradeDialogOpen }) => {
 	const { snippet, isWorking } = useSnippetForm()
 
 	return (
 		<div className="snippet-editor-sidebar">
+			<SnippetTypeInput setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
+
 			<div className="box">
 				{snippet.id && !isCondition(snippet) ? <ActivationSwitch /> : null}
 
 				{isNetworkAdmin() ? <MultisiteSharingSettings /> : null}
 
 				{isRTL() ? <RTLControl /> : null}
 
+				<ConditionModalButton setIsDialogOpen={setIsUpgradeDialogOpen} />
+				<SnippetLocationInput />
 				<PriorityInput />
 
 				{window.CODE_SNIPPETS_EDIT?.tagOptions.enabled ? <TagsInput /> : null}
 
 				{snippet.id
-					? <div className="row-actions visible">
+					? <div className="row-actions visible inline-form-field">
 						<ExportButtons />
 						<DeleteButton />
 					</div> : null}

src/js/components/EditorSidebar/controls/ActivationSwitch.tsx

@@ -9,10 +9,12 @@ export const ActivationSwitch = () => {
 	const { submitSnippet } = useSubmitSnippet()
 
 	return (
-		<div>
+		<div className="inline-form-field">
 			<h4>
 				<label htmlFor="activation-switch">
-					{__('Is Active', 'code-snippets')}
+					{snippet.active
+						? __('Deactivate snippet', 'code-snippets')
+						: __('Activate snippet', 'code-snippets')}
 				</label>
 			</h4>
 

src/js/components/EditorSidebar/controls/PriorityInput.tsx

@@ -7,7 +7,7 @@ export const PriorityInput = () => {
 	const { snippet, isReadOnly, setSnippet } = useSnippetForm()
 
 	return (
-		<div className="snippet-priority">
+		<div className="snippet-priority inline-form-field">
 			<h4>
 				<label htmlFor="snippet-priority">
 					{__('Priority', 'code-snippets')}

src/js/components/EditorSidebar/controls/TagsInput.tsx

@@ -10,7 +10,7 @@ export const TagsInput: React.FC = () => {
 
 	return options?.enabled
 		? <div className="snippet-tags-container">
-			<h4><label>{__('Tags', 'code-snippets')}</label></h4>
+			<h4><label htmlFor="components-form-token-input-0">{__('Tags', 'code-snippets')}</label></h4>
 
 			<FormTokenField
 				label=""

src/js/components/SnippetForm/SnippetForm.tsx

@@ -10,12 +10,9 @@ import { createSnippetObject, getSnippetType, isCondition, validateSnippet } fro
 import { WithSnippetFormContext, useSnippetForm } from '../../hooks/useSnippetForm'
 import { ConfirmDialog } from '../common/ConfirmDialog'
 import { UpsellDialog } from '../common/UpsellDialog'
-import { ConditionModalButton } from '../ConditionModal/ConditionModalButton'
 import { EditorSidebar } from '../EditorSidebar'
 import { UpsellBanner } from '../common/UpsellBanner'
 import { CodeEditor } from './fields/CodeEditor'
-import { SnippetLocationInput } from './fields/SnippetLocationInput'
-import { SnippetTypeInput } from './fields/SnippetTypeInput'
 import { DescriptionEditor } from './fields/DescriptionEditor'
 import { NameInput } from './fields/NameInput'
 import { PageHeading } from './page/PageHeading'
@@ -161,15 +158,6 @@ const EditFormWrap: React.FC = () => {
 			<EditForm className={editFormClassName({ snippet, isReadOnly, isExpanded })}>
 				<main className="snippet-form-upper">
 					<NameInput />
-
-					{!isCondition(snippet) || 0 === snippet.id
-						? <div className="above-editor-container">
-							<SnippetTypeInput setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
-							<SnippetLocationInput />
-							<ConditionModalButton setIsDialogOpen={setIsUpgradeDialogOpen} />
-						</div>
-						: null}
-
 					<CodeEditor {...{ isExpanded, setIsExpanded }} />
 					<ConditionsEditor />
 				</main>
@@ -179,7 +167,7 @@ const EditFormWrap: React.FC = () => {
 					<DescriptionEditor />
 				</div>
 
-				<EditorSidebar />
+				<EditorSidebar setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />
 			</EditForm>
 
 			<UpsellDialog isOpen={isUpgradeDialogOpen} setIsOpen={setIsUpgradeDialogOpen} />