first commit

wp-content/plugins/code-snippets/css/edit/_conditions.scss

@@ -0,0 +1,6 @@
+.snippet-condition-editor-container {
+	margin-block-start: 33px;
+	padding: 32px;
+	border: 1px solid #c3c4c7;
+	background: #f6f7f7;
+}

wp-content/plugins/code-snippets/css/edit/_editor.scss

@@ -0,0 +1,89 @@
+
+.CodeMirror,
+.snippet-form textarea {
+	inline-size: 100%;
+	font-family: monospace;
+}
+
+.CodeMirror-sizer {
+	min-block-size: 300px !important;
+	box-sizing: border-box;
+	padding-block-end: 1.5em !important;
+
+	&::after {
+		position: absolute;
+		inset-block-end: 0;
+	}
+
+	.snippet-form.php-snippet & {
+		padding-block-end: 0 !important;
+
+		&::before {
+			content: '<?php';
+		}
+	}
+
+	.snippet-form.css-snippet & {
+		&::before {
+			content: '<style>';
+		}
+
+		&::after {
+			content: '</style>';
+		}
+	}
+
+	.snippet-form.js-snippet & {
+		&::before {
+			content: '<script>';
+		}
+
+		&::after {
+			content: '</script>';
+		}
+	}
+
+	.snippet-form.html-snippet & {
+		&::before {
+			content: '<!-- begin content -->';
+		}
+
+		&::after {
+			content: '<!-- end content -->';
+		}
+	}
+}
+
+.snippet-editor {
+	position: relative;
+}
+
+.snippet-editor-help {
+	position: absolute;
+	inset-inline-end: 5px;
+	inset-block-start: 5px;
+
+	td {
+		&:first-child {
+			padding-inline-end: 0.5em;
+		}
+
+		@media (width >= 512px) {
+			white-space: nowrap;
+		}
+	}
+
+	.mac-key {
+		display: none;
+	}
+
+	.platform-mac {
+		.mac-key {
+			display: inline;
+		}
+
+		.pc-key {
+			display: none;
+		}
+	}
+}

wp-content/plugins/code-snippets/css/edit/_form.scss

@@ -0,0 +1,99 @@
+@use '../common/theme';
+
+$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;
+	justify-content: space-between;
+	flex-flow: row;
+	gap: 2em;
+
+	.small-badge {
+		margin-inline-start: 0.5em;
+	}
+
+	.badge {
+		float: inline-end;
+	}
+}
+
+
+.conditions-editor-open {
+	.button.button-large {
+		block-size: 100%;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		overflow: hidden;
+		border-color: #ccc;
+		padding-block: 6px;
+		padding-inline: 12px;
+	}
+
+	&.no-condition .cond-badge {
+		background: transparent;
+		color: inherit;
+		border: 1px solid currentcolor;
+	}
+
+	&.no-condition:hover .cond-badge {
+		color: #fff;
+		background: theme.$accent;
+		border-color: theme.$accent;
+	}
+}
+
+.snippet-form {
+	margin-block-start: 10px;
+	display: grid;
+	gap: $sidebar-gap;
+	grid-template-columns: 1fr $sidebar-width;
+	grid-template-areas: 'upper sidebar' 'lower sidebar';
+	transition: all 700ms;
+
+	&.snippet-form-expanded {
+		grid-template-areas: 'upper upper' 'lower sidebar';
+	}
+
+	.snippet-form-upper {
+		grid-area: upper;
+	}
+
+	.snippet-form-lower {
+		grid-area: lower;
+	}
+
+	.snippet-editor-sidebar {
+		grid-area: span 3 / sidebar;
+		max-inline-size: $sidebar-width;
+		position: sticky;
+		inset-block-start: 32px;
+		align-self: start;
+	}
+
+	@media (width <= 1024px) {
+		grid-template-columns: 1fr;
+	}
+
+	h2, h3 {
+		margin-block: 25px 15px;
+		margin-inline: 0;
+		font-size: 1.16em;
+
+		label {
+			cursor: auto;
+		}
+
+		.button {
+			font-weight: normal;
+		}
+	}
+}

wp-content/plugins/code-snippets/css/edit/_gpt.scss

@@ -0,0 +1,103 @@
+.cloud-create-modal {
+	.components-modal__content {
+		min-inline-size: 550px;
+	}
+
+	.action-buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.components-button.is-secondary {
+		box-shadow: none;
+	}
+
+	.notice {
+		margin-inline: 0;
+	}
+}
+
+.generate-button {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+
+	.dashicons-warning {
+		color: #b32d2e;
+	}
+
+	.snippet-tags-container &,
+	.snippet-description-container & {
+		float: inline-end;
+	}
+}
+
+.code-line-explanation {
+	display: flex;
+	cursor: default;
+	font-size: inherit;
+	margin: 0;
+	padding-inline: 6px;
+	border-inline-start: none;
+	border-inline-end: none;
+	border-block-start: 1px solid rgb(0 0 0 / 15%);
+	border-block-end: 1px solid rgb(0 0 0 / 15%);
+	border-image-slice: 1;
+	border-image-width: 1;
+	border-image-repeat: stretch;
+	color: #666;
+	font-style: italic;
+	font-family: monospace;
+	gap: 5px;
+	align-items: center;
+
+	img {
+		block-size: 1rem;
+		opacity: 0.7;
+	}
+
+	.code-line-actions {
+		cursor: default;
+		gap: 7px;
+		display: inline-flex;
+		margin-inline-start: 5px;
+		font-family: system-ui;
+		font-style: normal;
+
+		.commit {
+			color: #3d9970;
+		}
+
+		.remove {
+			color: #b32d2e;
+		}
+
+		.action {
+			cursor: pointer;
+			opacity: 0.6;
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
+}
+
+.cloud-connect-modal {
+	.icons-group {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.dashicons {
+			inline-size: 50px;
+			block-size: 50px;
+			font-size: 50px;
+		}
+	}
+
+	.action-buttons {
+		display: flex;
+		justify-content: flex-end;
+	}
+}

wp-content/plugins/code-snippets/css/edit/_sidebar.scss

@@ -0,0 +1,155 @@
+@use '../common/theme';
+
+.code-snippets-modal {
+	p h4 {
+		margin-block-start: 0;
+	}
+}
+
+.snippet-editor-sidebar {
+	.button-large {
+		block-size: 48px;
+	}
+
+	.row-actions {
+		display: flex;
+
+		.button {
+			background: none;
+			border: none;
+		}
+	}
+
+	.delete-button {
+		color: #cc1818;
+
+		&:hover {
+			color: #9e1313;
+		}
+
+		&:focus {
+			color: #710d0d;
+			border-color: #710d0d;
+		}
+	}
+
+	.help-tooltip {
+		margin-block: 0;
+		margin-inline: 5px auto;
+	}
+
+	.box {
+		background-color: #fff;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		padding: 1.5em;
+		display: flex;
+		flex-flow: column;
+		gap: 1em;
+
+		h4 {
+			margin-block: 0.5em;
+			margin-inline: 0;
+		}
+
+		.inline-form-field {
+			display: flex;
+			flex-flow: row wrap;
+			align-items: center;
+			gap: 5px;
+
+			> :last-child {
+				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 {
+		inline-size: 100%;
+	}
+
+	.generate-button {
+		margin-inline-start: auto;
+	}
+}
+
+.snippet-priority input {
+	inline-size: 4em;
+}
+
+p.submit {
+	display: flex;
+	flex-flow: column;
+	gap: 8px;
+	margin-block-start: 17px;
+	padding-block-start: 0;
+}
+
+.activation-switch-container label {
+	display: flex;
+	flex-flow: row;
+	gap: 5px;
+	justify-content: center;
+}
+
+.shortcode-tag-wrapper {
+	background: #fff;
+	min-block-size: 54px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 10px;
+	box-sizing: border-box;
+
+	code {
+		background: transparent;
+		padding-inline: 0.5em;
+		text-indent: -0.5em;
+	}
+}
+
+.code-snippets-copy-text.button {
+	display: flex;
+	align-items: center;
+	gap: 3px;
+
+	.dashicons {
+		block-size: 18px;
+		inline-size: 18px;
+		font-size: 18px;
+	}
+
+	.spinner-wrapper {
+		block-size: 18px;
+		inline-size: 18px;
+		display: flex;
+		align-items: center;
+	}
+
+	.components-spinner {
+		block-size: 12px;
+	}
+}