cloud-hosting-platform/site-builder
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(site-builder): HTML blocks get a code-only style panel

Browse Source 
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
shadowdao
2026-08-08 18:42:28 -07:00
co-authored by Claude Opus 5
parent 0d0d722dd7
commit 4ac57e1c4c
4 changed files with 79 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
craft/src/panels/right/GuidedStyles.tsx
+10 -3
View File
@@ -17,6 +17,7 @@ import {
PricingStylePanel,
BackgroundSectionStylePanel,
GenericPropsEditor,
HtmlStylePanel,
} from './styles';
/* ================================================================
@@ -75,8 +76,10 @@ export const GuidedStyles: React.FC = () => {
const isSocial = /^social links$|^icon$|^star rating$/i.test(typeName);
const isPricing = /^pricing/i.test(typeName);
const isSection = /^accordion$|^tabs$|^testimonial|^countdown$|^number counter$|^cta section$|^call to action$|^features grid$/i.test(typeName);
// Utility types that need minimal controls
const isUtility = /^divider$|^spacer$|^html$/i.test(typeName);
const isHtml = /^html$/i.test(typeName);
// Utility types that need minimal controls. HTML is deliberately NOT here
// -- it gets HtmlStylePanel, which shows the code editor and nothing else.
const isUtility = /^divider$|^spacer$/i.test(typeName);
// Icon for the type badge
const typeIcon = isText ? 'fa-font'
@@ -90,6 +93,7 @@ export const GuidedStyles: React.FC = () => {
: isForm ? 'fa-wpforms'
: isSocial ? 'fa-share-alt'
: isSection ? 'fa-th-large'
: isHtml ? 'fa-code'
: isUtility ? 'fa-ellipsis-h'
: 'fa-cube';
@@ -158,11 +162,14 @@ export const GuidedStyles: React.FC = () => {
{/* SECTION-TYPE (Accordion, Tabs, Testimonials, Countdown, Counter, CTA, Features) */}
{isSection && <SectionTypePanel selectedId={selected} nodeProps={nodeProps} typeName={typeName} />}
{/* HTML -- code editor only */}
{isHtml && <HtmlStylePanel selectedId={selected} nodeProps={nodeProps} />}
{/* UTILITY (Divider, Spacer, HTML) -- use generic but it works well for these */}
{isUtility && <GenericPropsEditor selectedId={selected} nodeProps={nodeProps} typeName={typeName} />}
{/* FALLBACK: Anything not matched above */}
{!isText && !isButton && !isImage && !isBgSection && !isContainer && !isHero && !isNav && !isMedia && !isForm && !isSocial && !isPricing && !isSection && !isUtility && (
{!isText && !isButton && !isImage && !isBgSection && !isContainer && !isHero && !isNav && !isMedia && !isForm && !isSocial && !isPricing && !isSection && !isUtility && !isHtml && (
<GenericPropsEditor selectedId={selected} nodeProps={nodeProps} typeName={typeName} />
)}
</div>