@styleflow.app/flowpress-astro-core 0.2.0-beta.0 → 0.2.0-beta.11

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # Changelog
 
+## Unreleased
+
+## 0.2.0-beta.11
+
+- Rendered empty Gutenberg and FlowPress text blocks with an internal
+  ` `, preserving their typographic line height without visible
+  characters or synthetic break elements.
+
+## 0.2.0-beta.10
+
+- Preserved intentionally empty core Gutenberg paragraphs as visible line
+  breaks, including paragraphs resolved through FlowPress templates.
+- Exported safe recursive collection of CMS-authored block class names for
+  Tailwind `@source inline()` generation.
+
+## 0.2.0-beta.9
+
+- Preserved repeated Gutenberg RichText spacing across `<br>` sequences,
+  legacy empty paragraphs and literal double/triple newlines.
+
+## 0.2.0-beta.8
+
+- Applied Gutenberg `anchor` and `className` attributes to each rendered
+  block root, merging custom classes with the required FlowPress renderer
+  classes and preserving transparent template blocks when neither is set.
+
+## 0.2.0-beta.5
+
+- Split Gutenberg rendering into dedicated hero, responsive layout, text,
+  list/template and CF7 modules.
+- Added semantic foreground/modifier propagation and core text block
+  rendering.
+- Added responsive 12-column inheritance, token-based partial containers,
+  hero media/scrim rendering and reduced-motion handling.
+- Added repeated query-item template rendering with the previous plain-list
+  fallback.
+- Added an accessible Turnstile/CF7 browser form compatible with static and
+  server builds.
+- Added Astro component checking to the release gate.
+
+## 0.2.0-beta.4
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.2`.
+- Validated the npm Trusted Publisher path with a new OIDC-only publication.
+
+## 0.2.0-beta.3
+
+- Updated the exact StyleFlow Astro dependency to `0.3.0-beta.1`.
+- Made the optional PHP parity test compatible with standalone CI checkouts;
+  the TypeScript hierarchy tests remain mandatory.
+
+## 0.2.0-beta.2
+
+- Made Gutenberg color axes inherit by omission until authors explicitly set
+  a valid tone or intensity.
+- Applied explicit color axes to heading, button, and quote renderers.
+- Embedded source contents in generated sourcemaps for clean Astro/Vite
+  diagnostics when the package is installed from npm.
+
 ## 0.2.0-beta.0
 
 - Made the repository buildable outside the original monorepo.

package/README.md

@@ -9,7 +9,7 @@ The package must not import from an application or project plugin.
 ## Install
 
 ```bash
-pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.0
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.11
 ```
 
 Prereleases are pinned exactly. The package expects Astro 7 or newer and the
@@ -30,6 +30,20 @@ For local Cloudflare development, prefer an HTTP loopback endpoint dedicated
 to server-to-server traffic. Keep the public HTTPS backend URL separate for
 canonical URL rewriting.
 
+`GutenbergRenderer.astro` renders the responsive hero/grid/column contract,
+StyleFlow text axes and resolved content/query templates. CF7 schemas
+serialized by WordPress become accessible client forms that submit directly
+to the protected FlowPress REST endpoint, so the same component works in
+static and server output modes. Gutenberg `anchor` and `className` attributes
+are applied to the rendered block root as HTML `id` and `class`. Rich Text
+preserves intentional double, triple and longer line breaks, including content
+saved by older editor versions as empty paragraphs. Empty textual blocks render
+an internal ` `, preserving their typographic line height without adding
+visible characters. The exported
+`collectFlowpressClassNames()` helper recursively extracts safe class tokens
+from rendered CMS blocks so consumers can generate Tailwind
+`@source inline()` directives before compiling their frontend CSS.
+
 ## Release
 
 ```bash
@@ -45,3 +59,10 @@ release and in CI.
 The first publish requires npm organization access and 2FA. Subsequent
 publishes use `.github/workflows/publish.yml` with npm trusted publishing
 (OIDC); no long-lived publish token belongs in this repository.
+
+The TypeScript template-hierarchy suite is self-contained. Its additional PHP
+parity test runs when the sibling `flowpress-wordpress-core` checkout is
+available locally and is skipped in a standalone package checkout.
+
+Release activity reports are indexed in
+[`docs/activities/README.md`](docs/activities/README.md).

package/dist/astro/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import type { SfSeo } from "../types.js";
+import S from "@styleflow.app/astro/S.astro";
 
 interface Props {
   lang?: string;
@@ -44,6 +45,8 @@ const jsonLd = seo?.jsonLd ? JSON.stringify(seo.jsonLd) : null;
     <slot name="head" />
   </head>
   <body>
-    <slot />
+    <S.main tone="neutral" intensity={1} surface="default" layoutRole="none" density="md">
+      <slot />
+    </S.main>
   </body>
 </html>

package/dist/astro/DefaultTemplate.astro

@@ -7,28 +7,38 @@ import type { FlowpressTemplateProps } from "../types.js";
 const { route, content, styleflowContract } = Astro.props as FlowpressTemplateProps;
 const title = content?.title || route.seo?.title || "Contenuto";
 const isNotFound = route.queryType === "404" || route.status === 404;
+const hasGutembergBlocks = Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? true : false;
+//TODO SET GLOBAL LOCAL ON ENV
 ---
 
 <BaseLayout lang={route.locale || "it"} seo={route.seo}>
-  <S.main tone="neutral" intensity={1} surface="default" layoutRole="container" density="md">
-    <S.section tone="neutral" intensity={1} surface="default" layoutRole="section" density="md">
-      <S.h1 ty="heading" v="1" w="strong">{isNotFound ? "Pagina non trovata" : title}</S.h1>
-      {content?.excerpt && <S.p ty="body" v="md" w="default">{content.excerpt}</S.p>}
-      {Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? (
-        <GutenbergRenderer
-          blocks={content.contentBlocks as import("../types.js").FlowpressBlock[]}
-          contract={styleflowContract}
-        />
-      ) : content?.content && (
-        <S.div
-          tone="neutral"
-          intensity={1}
-          surface="default"
-          layoutRole="stack"
-          density="md"
-          set:html={String(content.content)}
-        />
-      )}
-    </S.section>
-  </S.main>
+
+  {hasGutembergBlocks ? (
+    <GutenbergRenderer
+        blocks={content?.contentBlocks as import("../types.js").FlowpressBlock[]}
+        contract={styleflowContract}
+      />
+  ) : ( 
+      <S.section tone="neutral" intensity={1} surface="default" layoutRole="section" density="md">
+        <S.h1 ty="heading" v="1" w="strong">{isNotFound ? "Pagina non trovata" : title}</S.h1>
+        {content?.excerpt && <S.p ty="body" v="md" w="default">{content.excerpt}</S.p>}
+        {Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? (
+          <GutenbergRenderer
+            blocks={content.contentBlocks as import("../types.js").FlowpressBlock[]}
+            contract={styleflowContract}
+          />
+        ) : content?.content && (
+          <S.div
+            tone="neutral"
+            intensity={1}
+            surface="default"
+            layoutRole="stack"
+            density="md"
+            set:html={String(content.content)}
+          />
+        )}
+      </S.section>
+   )}
+
+  
 </BaseLayout>

package/dist/astro/GutenbergRenderer.astro

@@ -1,10 +1,20 @@
 ---
 import S from "@styleflow.app/astro/S.astro";
-import {
-  resolveDynamicStyleflowProps,
-  type StyleflowContract
-} from "../styleflow.js";
+import type { StyleflowContract } from "../styleflow.js";
 import type { FlowpressBlock } from "../types.js";
+import ColumnBlock from "./blocks/ColumnBlock.astro";
+import FormBlock from "./blocks/FormBlock.astro";
+import GridBlock from "./blocks/GridBlock.astro";
+import HeroBlock from "./blocks/HeroBlock.astro";
+import ListItemFallback from "./blocks/ListItemFallback.astro";
+import TextBlock from "./blocks/TextBlock.astro";
+import {
+  blockHtmlAttributes,
+  linkValue,
+  objectValue,
+  semanticProps,
+  textValue
+} from "./blocks/helpers.js";
 
 interface Props {
   blocks: FlowpressBlock[];
@@ -13,59 +23,6 @@ interface Props {
 
 const { blocks, contract } = Astro.props;
 
-const defaults = {
-  tone: "neutral",
-  intensity: 1,
-  surface: "default",
-  layoutRole: "stack",
-  density: "md"
-};
-
-function styleflowProps(attributes: Record<string, unknown>) {
-  if (!contract) return defaults;
-  return resolveDynamicStyleflowProps(attributes, defaults, contract);
-}
-
-function dynamicProps(
-  attributes: Record<string, unknown>,
-  fallback: Record<string, unknown>
-) {
-  if (!contract) return fallback;
-  return resolveDynamicStyleflowProps(attributes, fallback, contract);
-}
-
-function text(block: FlowpressBlock, key = "text"): string {
-  return String(block.attributes[key] ?? "");
-}
-
-function objectValue(
-  block: FlowpressBlock,
-  key: string
-): Record<string, unknown> {
-  const value = block.attributes[key];
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? value as Record<string, unknown>
-    : {};
-}
-
-function linkValue(block: FlowpressBlock, key = "link"): string {
-  const value = block.attributes[key];
-  const href = typeof value === "string"
-    ? value
-    : String(objectValue(block, key).url ?? "");
-  if (/^(?:\/(?!\/)|#|https?:\/\/|mailto:|tel:)/i.test(href)) {
-    return href;
-  }
-  return "";
-}
-
-function itemImage(item: Record<string, unknown>): Record<string, unknown> {
-  const value = item.image;
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? value as Record<string, unknown>
-    : {};
-}
-
 function youtubeEmbedUrl(value: unknown): string | null {
   try {
     const url = new URL(String(value ?? ""));
@@ -87,50 +44,64 @@ function youtubeEmbedUrl(value: unknown): string | null {
 {blocks.map((block) => {
   const name = block.name.replace(/^sf\//, "");
   const children = block.innerBlocks ?? [];
-  const semantic = styleflowProps(block.attributes);
+  const semantic = semanticProps(block.attributes, contract);
+  const htmlAttributes = blockHtmlAttributes(block.attributes);
 
-  if (name === "heading") {
-    const level = Math.min(6, Math.max(1, Number(block.attributes.level ?? 2)));
-    const headingTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-    const typography = dynamicProps(
-      {
-        ty: "heading",
-        v: String(block.attributes.variant ?? level),
-        w: String(block.attributes.weight ?? "strong")
-      },
-      { ty: "heading", v: String(level), w: "strong" }
+  if (name === "hero") {
+    return (
+      <HeroBlock block={block} contract={contract}>
+        <Astro.self blocks={children} contract={contract} />
+      </HeroBlock>
     );
+  }
+
+  if (name === "grid") {
     return (
-      <S
-        as={headingTag}
-        {...typography}
-        set:html={text(block)}
-      />
+      <GridBlock block={block} contract={contract}>
+        <Astro.self blocks={children} contract={contract} />
+      </GridBlock>
     );
   }
 
-  if (name === "rich-text" || name === "core/paragraph") {
-    const html = String(block.attributes.content ?? block.innerHtml ?? "");
-    return <S as="div" {...semantic} set:html={html} />;
+  if (name === "column") {
+    return (
+      <ColumnBlock block={block} contract={contract}>
+        <Astro.self blocks={children} contract={contract} />
+      </ColumnBlock>
+    );
+  }
+
+  if ([
+    "heading",
+    "rich-text",
+    "quote",
+    "core/paragraph",
+    "core/heading",
+    "core/list",
+    "core/list-item",
+    "core/quote"
+  ].includes(name)) {
+    return (
+      <TextBlock block={block} contract={contract} hasChildren={children.length > 0}>
+        <Astro.self blocks={children} contract={contract} />
+      </TextBlock>
+    );
   }
 
   if (name === "button") {
     const href = linkValue(block, "href") || "#";
-    const interaction = dynamicProps(
-      {
-        interactivePriority: String(
-          block.attributes.interactivePriority ?? "primary"
-        )
-      },
-      { interactivePriority: "primary" }
-    );
+    const link = objectValue(block, "href");
+    const opensInNewTab = Boolean(link.opensInNewTab);
     return (
       <S
         as="a"
         href={href}
-        {...interaction}
+        target={opensInNewTab ? "_blank" : undefined}
+        rel={opensInNewTab ? "noopener noreferrer" : undefined}
+        {...semantic}
+        {...htmlAttributes}
       >
-        {text(block, "label")}
+        {textValue(block, "label")}
       </S>
     );
   }
@@ -144,7 +115,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     } | undefined;
     const src = image?.url ?? image?.sourceUrl;
     return src ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <img
           src={src}
           alt={String(block.attributes.alt ?? image?.alt ?? image?.altText ?? "")}
@@ -160,7 +131,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       ? block.attributes.images as Array<Record<string, unknown>>
       : [];
     return (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         {images.map((image) => image.url ? (
           <img
             src={String(image.url)}
@@ -177,7 +148,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const video = objectValue(block, "video");
     const poster = objectValue(block, "poster");
     return video.url ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <video
           src={String(video.url)}
           poster={poster.url ? String(poster.url) : undefined}
@@ -193,7 +164,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
   if (name === "video-youtube") {
     const embed = youtubeEmbedUrl(block.attributes.url);
     return embed ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <iframe
           src={embed}
           title={String(block.attributes.title ?? "YouTube video")}
@@ -205,24 +176,19 @@ function youtubeEmbedUrl(value: unknown): string | null {
     ) : null;
   }
 
-  if (name === "quote") {
+  if (name === "chip") {
     return (
-      <blockquote>
-        <S as="p" set:html={text(block, "quote")} />
-        {block.attributes.citation && <cite>{String(block.attributes.citation)}</cite>}
-      </blockquote>
+      <S as="span" {...semantic} {...htmlAttributes}>
+        {textValue(block, "label")}
+      </S>
     );
   }
 
-  if (name === "chip") {
-    return <S as="span" {...semantic}>{text(block, "label")}</S>;
-  }
-
   if (name === "card") {
     const media = objectValue(block, "image");
     const href = linkValue(block);
     return (
-      <S as="article" {...semantic}>
+      <S as="article" {...semantic} {...htmlAttributes}>
         {media.url && (
           <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
         )}
@@ -237,34 +203,41 @@ function youtubeEmbedUrl(value: unknown): string | null {
     const items = Array.isArray(block.attributes.resolvedItems)
       ? block.attributes.resolvedItems as Array<Record<string, unknown>>
       : [];
+    const resolvedBlocks = Array.isArray(block.attributes.resolvedBlocks)
+      ? block.attributes.resolvedBlocks as FlowpressBlock[][]
+      : [];
     return (
-      <S as="ul" {...semantic}>
-        {items.map((item) => (
+      <S as="ul" {...semantic} {...htmlAttributes}>
+        {items.map((item, index) => (
           <S as="li">
-            {itemImage(item).url && (
-              <img
-                src={String(itemImage(item).url)}
-                alt={String(itemImage(item).alt ?? "")}
-                loading="lazy"
-                decoding="async"
-              />
-            )}
-            {item.uri ? (
-              <S as="a" href={String(item.uri)}>{String(item.title ?? "")}</S>
+            {resolvedBlocks[index]?.length ? (
+              <Astro.self blocks={resolvedBlocks[index]} contract={contract} />
             ) : (
-              <S as="span">{String(item.title ?? "")}</S>
+              <ListItemFallback item={item} />
             )}
-            {item.excerpt && <S as="p">{String(item.excerpt)}</S>}
-            {item.priceHtml && <S as="div" set:html={String(item.priceHtml)} />}
           </S>
         ))}
       </S>
     );
   }
 
+  if (name === "template") {
+    return Object.keys(htmlAttributes).length > 0 ? (
+      <div {...htmlAttributes}>
+        <Astro.self blocks={children} contract={contract} />
+      </div>
+    ) : (
+      <Astro.self blocks={children} contract={contract} />
+    );
+  }
+
+  if (name === "form") {
+    return <FormBlock block={block} contract={contract} />;
+  }
+
   if (name === "accordion-item") {
     return (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <details>
           <summary>{String(block.attributes.title ?? "")}</summary>
           <Astro.self blocks={children} contract={contract} />
@@ -290,7 +263,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
         + `?key=${encodeURIComponent(googleMapsApiKey)}`
         + `&q=${encodeURIComponent(query)}`;
       return (
-        <S as="div" {...semantic}>
+        <S as="div" {...semantic} {...htmlAttributes}>
           <iframe
             src={source}
             title={address || "Map"}
@@ -301,7 +274,7 @@ function youtubeEmbedUrl(value: unknown): string | null {
       );
     }
     return query ? (
-      <S as="div" {...semantic}>
+      <S as="div" {...semantic} {...htmlAttributes}>
         <S
           as="a"
           href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
@@ -313,9 +286,9 @@ function youtubeEmbedUrl(value: unknown): string | null {
     ) : null;
   }
 
-  const layoutTag = ["section", "hero"].includes(name) ? "section" : "div";
+  const layoutTag = name === "section" ? "section" : "div";
   return (
-    <S as={layoutTag} {...semantic}>
+    <S as={layoutTag} {...semantic} {...htmlAttributes}>
       {block.innerHtml && children.length === 0
         ? <S as="div" set:html={block.innerHtml} />
         : <Astro.self blocks={children} contract={contract} />}

package/dist/astro/blocks/ColumnBlock.astro

@@ -0,0 +1,83 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import type { FlowpressBlock } from "../../types.js";
+import type { StyleflowContract } from "../../styleflow.js";
+import {
+  blockHtmlAttributes,
+  responsiveValues,
+  semanticProps
+} from "./helpers.js";
+
+interface Props {
+  block: FlowpressBlock;
+  contract?: StyleflowContract;
+}
+
+const { block, contract } = Astro.props;
+const values = responsiveValues(block.attributes, "span", 1);
+const partial = ["start", "end"].includes(String(block.attributes.partialContainer))
+  ? String(block.attributes.partialContainer)
+  : "none";
+const partialBreakpoint = ["base", "sm", "md", "lg", "xl", "2xl"].includes(
+  String(block.attributes.partialContainerBreakpoint)
+) ? String(block.attributes.partialContainerBreakpoint) : "lg";
+const semantic = semanticProps(block.attributes, contract);
+const htmlAttributes = blockHtmlAttributes(block.attributes, "flowpress-column");
+const style = [
+  `--flowpress-span-base:${values.base}`,
+  `--flowpress-span-sm:${values.sm}`,
+  `--flowpress-span-md:${values.md}`,
+  `--flowpress-span-lg:${values.lg}`,
+  `--flowpress-span-xl:${values.xl}`,
+  `--flowpress-span-2xl:${values["2xl"]}`
+].join(";");
+---
+
+<S
+  as="div"
+  {...semantic}
+  {...htmlAttributes}
+  data-partial={partial}
+  data-partial-breakpoint={partialBreakpoint}
+  style={style}
+>
+  <slot />
+</S>
+
+<style>
+  .flowpress-column {
+    grid-column: span var(--flowpress-span-base) / span var(--flowpress-span-base);
+    min-width: 0;
+  }
+  .flowpress-column[data-partial="start"][data-partial-breakpoint="base"] {
+    padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2));
+  }
+  .flowpress-column[data-partial="end"][data-partial-breakpoint="base"] {
+    padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2));
+  }
+  @media (min-width: 40rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-sm) / span var(--flowpress-span-sm); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="sm"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="sm"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 48rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-md) / span var(--flowpress-span-md); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="md"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="md"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 64rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-lg) / span var(--flowpress-span-lg); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="lg"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="lg"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 80rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-xl) / span var(--flowpress-span-xl); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="xl"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="xl"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+  @media (min-width: 96rem) {
+    .flowpress-column { grid-column: span var(--flowpress-span-2xl) / span var(--flowpress-span-2xl); }
+    .flowpress-column[data-partial="start"][data-partial-breakpoint="2xl"] { padding-inline-start: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+    .flowpress-column[data-partial="end"][data-partial-breakpoint="2xl"] { padding-inline-end: max(var(--sf-padding-inline, 0px), calc((100vw - var(--sf-container-max-width, 100vw)) / 2)); }
+  }
+</style>