feat: add main landmark

packages/visual-editor/src/components/Locator.test.tsx

@@ -20,6 +20,7 @@ import { LocatorComponent } from "./Locator.tsx";
 import { Render, Config, resolveAllData } from "@puckeditor/core";
 import { page } from "@vitest/browser/context";
 import { backgroundColors } from "../utils/themeConfigOptions.ts";
+import { MainContent } from "./structure/MainContent.tsx";
 
 vi.mock("@yext/search-ui-react", async () => {
   const actual = await vi.importActual<typeof import("@yext/search-ui-react")>(
@@ -1141,7 +1142,7 @@ const screenshotThreshold = 30;
 
 describe("Locator", async () => {
   const puckConfig: Config = {
-    components: { Locator: LocatorComponent },
+    components: { Locator: LocatorComponent, MainContent },
     root: {
       render: ({ children }: { children: React.ReactNode }) => {
         return <>{children}</>;

packages/visual-editor/src/components/configs/directoryConfig.tsx

@@ -22,24 +22,30 @@ import {
 } from "../categories/SlotsCategory.tsx";
 import { resolveDirectoryRootProps } from "../../utils/getPageMetadata.ts";
 import { pt } from "../../utils/i18n/platform.ts";
+import { MainContent, MainContentProps } from "../structure/MainContent.tsx";
+import { rootAllowedComponents } from "./rootAllowedComponents.ts";
 
 export interface DirectoryConfigProps
   extends DirectoryCategoryProps,
     SlotsCategoryProps,
     DeprecatedCategoryProps,
     OtherCategoryProps {
   BannerSection: BannerSectionProps;
+  MainContent: MainContentProps;
 }
 
+const components: Config<DirectoryConfigProps>["components"] = {
+  ...DirectoryCategoryComponents,
+  ...SlotsCategoryComponents,
+  ...DeprecatedCategoryComponents,
+  ...OtherCategoryComponents,
+  BannerSection,
+  MainContent,
+};
+
 // The config used for all levels of directory pages
 export const directoryConfig: Config<DirectoryConfigProps> = {
-  components: {
-    ...DirectoryCategoryComponents,
-    ...SlotsCategoryComponents,
-    ...DeprecatedCategoryComponents,
-    ...OtherCategoryComponents,
-    BannerSection,
-  },
+  components,
   categories: {
     pageSections: {
       title: pt("categories.standardSections", "Standard Sections"),
@@ -49,6 +55,10 @@ export const directoryConfig: Config<DirectoryConfigProps> = {
       components: SlotsCategory,
       visible: false,
     },
+    structure: {
+      components: ["MainContent"],
+      visible: false,
+    },
     // deprecated components are hidden in the sidebar but still render if used in the page
     deprecatedComponents: {
       visible: false,
@@ -78,6 +88,9 @@ export const directoryConfig: Config<DirectoryConfigProps> = {
             flexDirection: "column",
             minHeight: "100vh",
           }}
+          disallow={Object.keys(components).filter(
+            (componentName) => !rootAllowedComponents.includes(componentName)
+          )}
         />
       );
     },

packages/visual-editor/src/components/configs/locatorConfig.tsx

@@ -21,24 +21,30 @@ import {
   SlotsCategoryProps,
 } from "../categories/SlotsCategory.tsx";
 import { pt } from "../../utils/i18n/platform.ts";
+import { MainContent, MainContentProps } from "../structure/MainContent.tsx";
+import { rootAllowedComponents } from "./rootAllowedComponents.ts";
 
 export interface LocatorConfigProps
   extends LocatorCategoryProps,
     SlotsCategoryProps,
     DeprecatedCategoryProps,
     OtherCategoryProps {
   BannerSection: BannerSectionProps;
+  MainContent: MainContentProps;
 }
 
+const components: Config<LocatorConfigProps>["components"] = {
+  ...LocatorCategoryComponents,
+  ...SlotsCategoryComponents,
+  ...DeprecatedCategoryComponents,
+  ...OtherCategoryComponents,
+  BannerSection,
+  MainContent,
+};
+
 // The config used for the locator
 export const locatorConfig: Config<LocatorConfigProps> = {
-  components: {
-    ...LocatorCategoryComponents,
-    ...SlotsCategoryComponents,
-    ...DeprecatedCategoryComponents,
-    ...OtherCategoryComponents,
-    BannerSection,
-  },
+  components,
   categories: {
     pageSections: {
       title: pt("categories.standardSections", "Standard Sections"),
@@ -48,6 +54,10 @@ export const locatorConfig: Config<LocatorConfigProps> = {
       components: SlotsCategory,
       visible: false,
     },
+    structure: {
+      components: ["MainContent"],
+      visible: false,
+    },
     // deprecated components are hidden in the sidebar but still render if used in the page
     deprecatedComponents: {
       visible: false,
@@ -67,6 +77,9 @@ export const locatorConfig: Config<LocatorConfigProps> = {
             flexDirection: "column",
             minHeight: "100vh",
           }}
+          disallow={Object.keys(components).filter(
+            (componentName) => !rootAllowedComponents.includes(componentName)
+          )}
         />
       );
     },

packages/visual-editor/src/components/configs/mainConfig.tsx

@@ -25,20 +25,25 @@ import {
   SlotsCategoryComponents,
   SlotsCategoryProps,
 } from "../categories/SlotsCategory.tsx";
+import { MainContent, MainContentProps } from "../structure/MainContent.tsx";
+import { rootAllowedComponents } from "./rootAllowedComponents.ts";
 
 export interface MainConfigProps
   extends PageSectionCategoryProps,
     DeprecatedCategoryProps,
     OtherCategoryProps,
     AdvancedCoreInfoCategoryProps,
-    SlotsCategoryProps {}
+    SlotsCategoryProps {
+  MainContent: MainContentProps;
+}
 
 const components: Config<MainConfigProps>["components"] = {
   ...PageSectionCategoryComponents,
   ...DeprecatedCategoryComponents,
   ...OtherCategoryComponents,
   ...AdvancedCoreInfoCategoryComponents,
   ...SlotsCategoryComponents,
+  MainContent,
 };
 
 // The config used for base entities (locations, financial professionals, etc.)
@@ -61,6 +66,10 @@ export const mainConfig: Config<MainConfigProps> = {
       components: SlotsCategory,
       visible: false,
     },
+    structure: {
+      components: ["MainContent"],
+      visible: false,
+    },
     // deprecated components are hidden in the sidebar but still render if used in the page
     deprecatedComponents: {
       visible: false,
@@ -77,7 +86,9 @@ export const mainConfig: Config<MainConfigProps> = {
             flexDirection: "column",
             minHeight: "100vh",
           }}
-          disallow={AdvancedCoreInfoCategory.filter((k) => k !== "Grid")}
+          disallow={Object.keys(components).filter(
+            (componentName) => !rootAllowedComponents.includes(componentName)
+          )}
         />
       );
     },

packages/visual-editor/src/components/configs/rootAllowedComponents.ts

@@ -0,0 +1,8 @@
+export const rootAllowedComponents = [
+  "ExpandedHeader",
+  "ExpandedFooter",
+  "Header",
+  "Footer",
+  "MainContent",
+  "CustomCodeSection",
+];

packages/visual-editor/src/components/customCode/CustomCodeSection.test.tsx

@@ -11,6 +11,7 @@ import { migrationRegistry } from "../migrations/migrationRegistry.ts";
 import { VisualEditorProvider } from "../../utils/VisualEditorProvider.tsx";
 import { Render, Config } from "@puckeditor/core";
 import { page } from "@vitest/browser/context";
+import { MainContent } from "../structure/MainContent.tsx";
 
 const tests: ComponentTest[] = [
   {
@@ -149,7 +150,7 @@ const tests: ComponentTest[] = [
 
 describe("CustomCodeSection", async () => {
   const puckConfig: Config = {
-    components: { CustomCodeSection },
+    components: { CustomCodeSection, MainContent },
     root: {
       render: ({ children }: { children: React.ReactNode }) => {
         return <>{children}</>;

packages/visual-editor/src/components/directory/Directory.test.tsx

@@ -14,6 +14,7 @@ import { SlotsCategoryComponents } from "../categories/SlotsCategory.tsx";
 import { VisualEditorProvider } from "../../utils/VisualEditorProvider.tsx";
 import { Render, Config, resolveAllData } from "@puckeditor/core";
 import { page } from "@vitest/browser/context";
+import { MainContent } from "../structure/MainContent.tsx";
 
 const rootDocument = {
   locale: "en",
@@ -653,7 +654,7 @@ const tests: ComponentTest[] = [
 
 describe("Directory", async () => {
   const puckConfig: Config = {
-    components: { Directory, ...SlotsCategoryComponents },
+    components: { Directory, MainContent, ...SlotsCategoryComponents },
     root: {
       render: ({ children }: { children: React.ReactNode }) => {
         return <>{children}</>;

packages/visual-editor/src/components/footer/ExpandedFooter.test.tsx

@@ -12,6 +12,7 @@ import { SlotsCategoryComponents } from "../categories/SlotsCategory.tsx";
 import { Render, Config } from "@puckeditor/core";
 import { page } from "@vitest/browser/context";
 import { ExpandedFooter, validPatterns } from "./ExpandedFooter.tsx";
+import { MainContent } from "../structure/MainContent.tsx";
 
 const testLogoUrl: string = "https://placehold.co/100";
 
@@ -2456,7 +2457,7 @@ const socialLinkTestCases = [
 
 describe("ExpandedFooter", async () => {
   const puckConfig: Config = {
-    components: { ExpandedFooter, ...SlotsCategoryComponents },
+    components: { ExpandedFooter, MainContent, ...SlotsCategoryComponents },
     root: {
       render: ({ children }: { children: React.ReactNode }) => {
         return <>{children}</>;

packages/visual-editor/src/components/header/ExpandedHeader.test.tsx

@@ -16,6 +16,7 @@ import { VisualEditorProvider } from "../../utils/VisualEditorProvider.tsx";
 import { Render, Config, resolveAllData } from "@puckeditor/core";
 import { page, type BrowserPage } from "@vitest/browser/context";
 import { defaultBannerProps } from "../pageSections/Banner.tsx";
+import { MainContent } from "../structure/MainContent.tsx";
 
 const clickMenuIfVisible = async (page: BrowserPage) => {
   const menuButton = page.getByLabelText("Open menu");
@@ -2632,7 +2633,12 @@ const screenshotThreshold = 45;
 
 describe("ExpandedHeader", async () => {
   const puckConfig: Config = {
-    components: { ExpandedHeader, BannerSection, ...SlotsCategoryComponents },
+    components: {
+      ExpandedHeader,
+      BannerSection,
+      MainContent,
+      ...SlotsCategoryComponents,
+    },
     root: {
       render: ({ children }: { children: React.ReactNode }) => {
         return <>{children}</>;

packages/visual-editor/src/components/header/ExpandedHeader.tsx

@@ -107,7 +107,7 @@ const ExpandedHeaderWrapper: PuckComponent<ExpandedHeaderProps> = ({
 }) => {
   return (
     <ExpandedHeaderMenuProvider>
-      <div className={headerWrapper({ position: styles.headerPosition })}>
+      <header className={headerWrapper({ position: styles.headerPosition })}>
         {/* Secondary Header (Top Bar) */}
         <div className="hidden md:flex">
           <slots.SecondaryHeaderSlot
@@ -119,7 +119,7 @@ const ExpandedHeaderWrapper: PuckComponent<ExpandedHeaderProps> = ({
         <slots.PrimaryHeaderSlot
           style={{ height: "auto", position: "relative" }}
         />
-      </div>
+      </header>
     </ExpandedHeaderMenuProvider>
   );
 };

packages/visual-editor/src/components/layoutBlocks/Grid.test.tsx

@@ -14,6 +14,7 @@ import {
   transformTests,
 } from "../testing/componentTests.setup.ts";
 import { AdvancedCoreInfoCategoryComponents } from "../categories/AdvancedCoreInfoCategory.tsx";
+import { MainContent } from "../structure/MainContent.tsx";
 
 const testAddress = {
   city: "Brooklyn",
@@ -2144,7 +2145,7 @@ const tests: ComponentTest[] = [
 
 describe("Grid", async () => {
   const puckConfig: Config = {
-    components: AdvancedCoreInfoCategoryComponents,
+    components: { ...AdvancedCoreInfoCategoryComponents, MainContent },
     root: {
       render: ({ children }: { children: React.ReactNode }) => <>{children}</>,
     },