From 32ce5c542c90be348895328078e392dde2052957 Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Fri, 04 Sep 2026 19:15:16 +0000
Subject: [PATCH] =Working at adding defined fields to a dedicated panel in the gutenberg editor. Registrar now has AddCustomFields.php, which currently only supports post fields. Added a @wordpress/plugins base _meta/fields in /build and /src that successfully creates a panel. Next steps: determine sections and fields, group fields by section (each section to a panel), and save output
---
src/menu/style.scss | 212 +++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 174 insertions(+), 38 deletions(-)
diff --git a/src/menu/style.scss b/src/menu/style.scss
index f54b2a5..51a9d93 100644
--- a/src/menu/style.scss
+++ b/src/menu/style.scss
@@ -1,15 +1,20 @@
-.info h4 {
- margin: 0;
- font-weight: var(--fw-h);
- font-size: var(--txt-medium);
+@media (min-width: 600px) {
+ #wpadminbar ~ .wp-site-blocks nav.menu {
+ top: calc(var(--btn) + 1rem + 16px);
+ }
}
-
-.field.quantity.quantity > label {
- position: absolute;
- left: var(--offScreen);
+.scroll-up nav.menu {
+ top: -2rem;
}
nav.menu {
max-width: 100%;
+ position: sticky;
+ top: calc(var(--btn));
+ z-index: 5;
+ grid-column: full;
+ background-color: rgba(var(--base-50), var(--op-6));
+ box-shadow: var(--shdw-down) rgba(var(--base), var(--op-45));
+
ul {
--justify: flex-start;
li {
@@ -31,41 +36,172 @@
}
}
- .menu-item.menu-item {
- margin: var(--sp2);
- max-width: none;
- &:target {
- outline: none;
- background: transparent;
- border: 1rem solid rgb(var(--action-0));
- h3 {
- color: rgb(var(--action-0));
- }
+.menu-item.menu-item {
+ margin: var(--sp2);
+ padding-top: var(--sp4);
+ max-width: none;
+ &:target {
+ outline: none;
+ background: transparent;
+ border: 1rem solid rgb(var(--action-0));
+ h3 {
+ color: rgb(var(--action-0));
}
- +.menu-item {
- padding-top: var(--sp4);
- border-top: 1px solid rgb(var(--base-200));
- }
+ }
- .header {
- flex-wrap:nowrap;
- figure {
- max-width: 30vw!important;
- aspect-ratio: 1;
- object-fit: cover;
- }
- h3, p {
- margin: 0;
- width: max-content;
- }
- }
+ +.menu-item {
+ border-top: 1px solid rgb(var(--base-200));
+ }
- .gallery figure {
- max-width: 15vw!important;
+
+
+
+
+ .price s {
+ font-size: var(--txt-small);
+ vertical-align: top;
+ display: inline-block;
+ padding-right: 1rem;
+ }
+ .price:has(s) {
+ color: rgb(var(--secondary-0));
+
+ s {
+ color: rgb(var(--contrast));
+ }
+ }
+
+ .tags.left {
+ left: -1rem;
+
+ .sale, .featured {
+ display: flex;
+ --gap: .5rem;
+ padding: .125rem .5rem;
+ text-transform: uppercase;
+ font-weight: var(--fw-h-bold);
+ width: max-content;
+ }
+ .sale {
+ background-color: rgb(var(--secondary-0));
+ color: rgb(var(--secondary-contrast));
+ }
+ .featured {
+ background-color: rgb(var(--action-0));
+ color: rgb(var(--action-contrast));
+ }
+ }
+
+ .header {
+ flex-wrap:nowrap;
+ figure {
+ max-width: 30vw!important;
aspect-ratio: 1;
object-fit: cover;
}
- figcaption {
- display: none;
+ h3, p {
+ margin: 0;
+ width: max-content;
}
}
+
+ .gallery figure {
+ max-width: min(15vw, 8rem) !important;
+ aspect-ratio: 1;
+ object-fit: cover;
+ }
+ figcaption {
+ display: none;
+ }
+
+ .info {
+ --gap: 0.5rem 0;
+ h4 {
+ margin: 0;
+ font-weight: var(--fw-h);
+ font-size: var(--txt-medium);
+ }
+ .row {
+ --gap:1rem;
+
+ > a, figure, h4 {
+ position: sticky;
+ top: calc(var(--btnbtn) + 2.5rem);
+ background-color: rgb(var(--base-50));
+ z-index: 1;
+ }
+ >div {
+ flex: 1;
+ }
+ > a {
+ white-space: nowrap;
+ width: max-content;
+ }
+ figure {
+ max-width: min(10vw, 5rem) !important;
+ aspect-ratio: 1;
+ object-fit: cover;
+ margin: 0;
+ margin-inline: 0;
+ }
+ }
+
+ .sale-until,
+ .out-of-stock {
+ font-size: var(--txt-x-small);
+ font-style: italic;
+
+ i.icon {
+ vertical-align: top;
+ padding-right: 1rem;
+ color: rgb(var(--secondary-0));
+ }
+ }
+ }
+
+ .field.quantity.quantity > label {
+ position: absolute;
+ left: var(--offScreen);
+ }
+
+ @media (max-width: 768px) {
+ &:target {
+ border: 0;
+ }
+ .header.row {
+ flex-direction:column;
+
+ > figure {
+ aspect-ratio: 16/9;
+ max-width: 100%!important;
+ }
+ }
+ .info {
+ padding-top: 1rem;
+
+ .row {
+ --gap: 0;
+
+ &.nowrap.nowrap {
+ --wrap: wrap!important;
+ }
+ + .row {
+ border-top: 1px solid rgb(var(--base-200));
+ padding-top: .5rem;
+ }
+ > figure {
+ order: 2;
+ max-width: min(25vw, 6rem)!important;
+ }
+ > a {
+ order: 3;
+ }
+ }
+
+ }
+
+ .gallery {
+ gap: .25rem;
+ }
+ }
+}
--
Gitblit v1.10.0