Page Builder Blocks V2

apps/admin/src/plugins/pageBuilder/editorPlugins.ts

@@ -9,30 +9,27 @@ import list from "@webiny/app-page-builder/editor/plugins/elements/list";
 import quote from "@webiny/app-page-builder/editor/plugins/elements/quote";
 import icon from "@webiny/app-page-builder/editor/plugins/elements/icon";
 import button from "@webiny/app-page-builder/editor/plugins/elements/button";
-import soundcloud from "@webiny/app-page-builder/editor/plugins/elements/media/soundcloud";
-import vimeo from "@webiny/app-page-builder/editor/plugins/elements/media/vimeo";
-import youtube from "@webiny/app-page-builder/editor/plugins/elements/media/youtube";
-import iframe from "@webiny/app-page-builder/editor/plugins/elements/media/iframe";
+import soundcloud from "@webiny/app-page-builder/editor/plugins/elements/embeds/soundcloud";
+import vimeo from "@webiny/app-page-builder/editor/plugins/elements/embeds/vimeo";
+import youtube from "@webiny/app-page-builder/editor/plugins/elements/embeds/youtube";
+import iframe from "@webiny/app-page-builder/editor/plugins/elements/embeds/iframe";
 import pinterest from "@webiny/app-page-builder/editor/plugins/elements/social/pinterest";
 import twitter from "@webiny/app-page-builder/editor/plugins/elements/social/twitter";
 import codesandbox from "@webiny/app-page-builder/editor/plugins/elements/code/codesandbox";
 import pagesList from "@webiny/app-page-builder/editor/plugins/elements/pagesList";
 import imagesList from "@webiny/app-page-builder/editor/plugins/elements/imagesList";
 import heading from "@webiny/app-page-builder/editor/plugins/elements/heading";
-// Icons
-import icons from "@webiny/app-page-builder/editor/plugins/icons";
 // Element groups
 import basicGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/basic";
 import layoutGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/layout";
 import mediaGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/media";
+import embedsGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/embeds";
 import formGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/form";
 import socialGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/social";
 import codeGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/code";
 import savedGroup from "@webiny/app-page-builder/editor/plugins/elementGroups/saved";
 // Blocks
-import gridBlock from "@webiny/app-page-builder/editor/plugins/blocks/gridBlock";
-// Block categories
-import blocksCategories from "@webiny/app-page-builder/editor/plugins/blocksCategories";
+import emptyBlock from "@webiny/app-page-builder/pageEditor/plugins/blocks/emptyBlock";
 // Toolbar
 import addElement from "@webiny/app-page-builder/editor/plugins/toolbar/addElement";
 import navigator from "@webiny/app-page-builder/editor/plugins/toolbar/navigator";
@@ -68,7 +65,7 @@ export default [
     document(),
     grid(),
     block(),
-    gridBlock,
+    emptyBlock,
     cell(),
     heading(),
     paragraph(),
@@ -88,18 +85,15 @@ export default [
     pagesList(),
     // grid presets
     ...gridPresets,
-    // Icons
-    icons,
     // Element groups
     basicGroup,
     formGroup,
     layoutGroup,
     mediaGroup,
+    embedsGroup,
     socialGroup,
     codeGroup,
     savedGroup,
-    // Block categories
-    blocksCategories,
     // Toolbar
     addElement,
     navigator(),

apps/admin/src/plugins/pageBuilder/renderPlugins.ts

@@ -26,6 +26,7 @@ import align from "@webiny/app-page-builder/render/plugins/elementSettings/align
 import animation from "@webiny/app-page-builder/render/plugins/elementSettings/animation";
 import background from "@webiny/app-page-builder/render/plugins/elementSettings/background";
 import border from "@webiny/app-page-builder/render/plugins/elementSettings/border";
+import gridSettings from "@webiny/app-page-builder/render/plugins/elementSettings/grid";
 import height from "@webiny/app-page-builder/render/plugins/elementSettings/height";
 import width from "@webiny/app-page-builder/render/plugins/elementSettings/width";
 import shadow from "@webiny/app-page-builder/render/plugins/elementSettings/shadow";
@@ -65,6 +66,7 @@ export default [
     animation,
     background,
     border,
+    gridSettings,
     height,
     width,
     shadow,

apps/theme/formBuilder/styles/theme.scss

@@ -11,6 +11,7 @@
     display: flex;
     width: 100%;
     padding: 0;
+    background-color: var(--webiny-theme-color-surface, #ffffff);
   }
 
   .webiny-fb-form-layout-column {

apps/theme/pageBuilder/components/Menu.tsx

@@ -19,7 +19,7 @@ declare global {
 export const hasMenuItems = (data: GetPublishMenuQueryResponse): boolean => {
     return Boolean(
         data &&
-            Array.isArray(data.pageBuilder.getPublicMenu.data.items) &&
+            Array.isArray(data.pageBuilder.getPublicMenu.data?.items) &&
             data.pageBuilder.getPublicMenu.data.items.length
     );
 };

apps/theme/pageBuilder/styles/base.scss

@@ -74,6 +74,8 @@
 
   justify-content: var(--desktop-justify-content);
   align-items: var(--desktop-align-items);
+
+  box-shadow: var(--box-shadow);
 }
 // Some styles need more specificity
 .webiny-pb-media-query--desktop .webiny-pb-base-page-element-style {

apps/theme/pageBuilder/styles/elements/image.scss

@@ -9,11 +9,12 @@ img {
 }
 
 .webiny-pb-page-element-image {
-  overflow: hidden;
   box-sizing: border-box;
+  box-shadow: none !important;
   //display: flex; removed because of testimonial #2
   img {
     max-width: 100%;
+    box-shadow: var(--box-shadow);
   }
 }
 // make images center align on mobile

apps/theme/pageBuilder/styles/elements/layout.scss

@@ -27,72 +27,49 @@
 .webiny-pb-layout-grid {
   width: 100%;
   display: flex;
-  flex-direction: row;
+}
 
-  &-cell {
+.webiny-pb-media-query--desktop .webiny-pb-layout-grid {
+  flex-direction: var(--desktop-flex-direction, "row");
 
+  &-cell {
     @for $current from 1 to 13 {
       &-#{$current} {
-        width: math.percentage(math.div(1, 12) * $current);
+        width: var(--desktop-cell-width, math.percentage(math.div(1, 12) * $current));
       }
     }
-
-    & img {
-      width: auto;
-      height: auto;
-    }
   }
 }
-
-.webiny-pb-media-query--desktop .webiny-pb-layout-grid {
-  flex-direction: row;
-  // flex: 100% 1; // removed because Content #2
-}
 .webiny-pb-media-query--tablet .webiny-pb-layout-grid {
-  flex-direction: row;
-  // flex: 100% 1; // removed because Content #2
-}
-.webiny-pb-media-query--mobile-landscape .webiny-pb-layout-grid {
-  flex-direction: column;
-  max-width: 100% !important;
-  //width: 100% !important; // added for Content #6
-  //width: auto !important; // set to auto for CTA #9
-  flex: 0 auto !important;
+  flex-direction: var(--tablet-flex-direction, "row");
 
   &-cell {
-    flex-grow: 1;
-
     @for $current from 1 to 13 {
       &-#{$current} {
-        width: 100%;
+        width: var(--tablet-cell-width, math.percentage(math.div(1, 12) * $current));
       }
     }
+  }
+}
+.webiny-pb-media-query--mobile-landscape .webiny-pb-layout-grid {
+  flex-direction: var(--mobile-landscape-flex-direction, "column");
 
-    & img {
-      width: auto;
-      height: auto;
+  &-cell {
+    @for $current from 1 to 13 {
+      &-#{$current} {
+        width: var(--mobile-landscape-cell-width, math.percentage(math.div(1, 12) * $current));
+      }
     }
   }
 }
 .webiny-pb-media-query--mobile-portrait .webiny-pb-layout-grid {
-  flex-direction: column;
-  max-width: 100% !important;
-  //width: 100% !important; // added for Content #6
-  //width: auto !important; // set to auto for CTA #9
-  flex: 0 auto !important;
+  flex-direction: var(--mobile-portrait-flex-direction, "column");
 
   &-cell {
-    flex-grow: 1;
-
     @for $current from 1 to 13 {
       &-#{$current} {
-        width: 100%;
+        width: var(--mobile-portrait-cell-width, math.percentage(math.div(1, 12) * $current));
       }
     }
-
-    & img {
-      width: auto;
-      height: auto;
-    }
   }
 }

apps/website/src/plugins/pageBuilder.ts

@@ -44,6 +44,7 @@ import align from "@webiny/app-page-builder/render/plugins/elementSettings/align
 import animation from "@webiny/app-page-builder/render/plugins/elementSettings/animation";
 import background from "@webiny/app-page-builder/render/plugins/elementSettings/background";
 import border from "@webiny/app-page-builder/render/plugins/elementSettings/border";
+import gridSettings from "@webiny/app-page-builder/render/plugins/elementSettings/grid";
 import height from "@webiny/app-page-builder/render/plugins/elementSettings/height";
 import width from "@webiny/app-page-builder/render/plugins/elementSettings/width";
 import shadow from "@webiny/app-page-builder/render/plugins/elementSettings/shadow";
@@ -91,6 +92,7 @@ export default [
     animation,
     background,
     border,
+    gridSettings,
     height,
     width,
     shadow,

packages/api-page-builder-so-ddb-es/src/definitions/blockCategoryEntity.ts

@@ -0,0 +1,52 @@
+import { Entity, Table } from "dynamodb-toolbox";
+import { Attributes } from "~/types";
+
+interface Params {
+    table: Table;
+    entityName: string;
+    attributes: Attributes;
+}
+
+export const createBlockCategoryEntity = (params: Params): Entity<any> => {
+    const { entityName, attributes, table } = params;
+    return new Entity({
+        name: entityName,
+        table,
+        attributes: {
+            PK: {
+                partitionKey: true
+            },
+            SK: {
+                sortKey: true
+            },
+            TYPE: {
+                type: "string"
+            },
+            name: {
+                type: "string"
+            },
+            slug: {
+                type: "string"
+            },
+            icon: {
+                type: "string"
+            },
+            description: {
+                type: "string"
+            },
+            createdOn: {
+                type: "string"
+            },
+            createdBy: {
+                type: "map"
+            },
+            tenant: {
+                type: "string"
+            },
+            locale: {
+                type: "string"
+            },
+            ...(attributes || {})
+        }
+    });
+};

packages/api-page-builder-so-ddb-es/src/definitions/pageBlockEntity.ts

@@ -0,0 +1,55 @@
+import { Entity, Table } from "dynamodb-toolbox";
+import { Attributes } from "~/types";
+
+interface Params {
+    table: Table;
+    entityName: string;
+    attributes: Attributes;
+}
+
+export const createPageBlockEntity = (params: Params): Entity<any> => {
+    const { entityName, attributes, table } = params;
+    return new Entity({
+        name: entityName,
+        table,
+        attributes: {
+            PK: {
+                partitionKey: true
+            },
+            SK: {
+                sortKey: true
+            },
+            TYPE: {
+                type: "string"
+            },
+            id: {
+                type: "string"
+            },
+            name: {
+                type: "string"
+            },
+            blockCategory: {
+                type: "string"
+            },
+            content: {
+                type: "map"
+            },
+            preview: {
+                type: "map"
+            },
+            createdOn: {
+                type: "string"
+            },
+            createdBy: {
+                type: "map"
+            },
+            tenant: {
+                type: "string"
+            },
+            locale: {
+                type: "string"
+            },
+            ...(attributes || {})
+        }
+    });
+};