@webikon/webentor-core 0.9.12

package/resources/blocks/l-404/block.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/l-404",
+  "title": "Block 404",
+  "description": "Block for 404",
+  "category": "webentor-layout",
+  "icon": "block-default",
+  "keywords": [
+    "404",
+    "block",
+    "layout"
+  ],
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": "Nothing found"
+    },
+    "button": {
+      "type": "object",
+      "properties": {
+        "showButton": {
+          "type": "boolean"
+        },
+        "title": {
+          "type": "string"
+        },
+        "variant": {
+          "type": "string"
+        },
+        "url": {
+          "type": "string"
+        }
+      },
+      "default": {
+        "showButton": true,
+        "title": "Go to homepage",
+        "variant": "primary",
+        "url": ""
+      }
+    }
+  },
+  "supports": {
+    "align": false,
+    "anchor": true,
+    "color": {
+      "background": true
+    },
+    "jsx": true
+  }
+}

package/resources/blocks/l-404/l-404.block.tsx

@@ -0,0 +1,75 @@
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+import { WebentorButton } from '@webentorCore/blocks-components';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  title: string;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes } = props;
+
+  const blockProps = useBlockProps();
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <>
+      <div {...blockProps} className={`${blockProps.className}`}>
+        <div className="md:wbtr:pt-8 wbtr:flex wbtr:w-full wbtr:flex-col wbtr:items-center wbtr:gap-8 wbtr:border wbtr:border-editor-border wbtr:px-4 wbtr:pt-5 wbtr:pb-4">
+          <div className="wbtr:flex wbtr:w-full wbtr:flex-col wbtr:items-center wbtr:gap-4">
+            <span className="wbtr:font-heading wbtr:text-80 wbtr:text-gray-800">
+              404
+            </span>
+
+            <RichText
+              className="wbtr:text-gray-800 wbtr:uppercase"
+              tagName="h2"
+              placeholder={__('Title (required)', 'webentor')}
+              value={attributes.title}
+              onChange={(title) => setAttributes({ title })}
+            />
+          </div>
+
+          <WebentorButton
+            attributes={attributes}
+            setAttributes={setAttributes}
+            attributeName="button"
+            hideLink
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => null;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/l-flexible-container/block.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/l-flexible-container",
+  "apiVersion": 3,
+  "title": "Flexible Container",
+  "description": "Container block with a lot of flexible options.",
+  "category": "webentor-layout",
+  "icon": "layout",
+  "keywords": ["section", "container", "layout"],
+  "attributes": {
+    "template": {
+      "type": "array",
+      "default": null
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "color": {
+      "background": true,
+      "text": true
+    },
+    "webentor": {
+      "spacing": true,
+      "display": true,
+      "grid": true,
+      "gridItem": true,
+      "flexbox": true,
+      "flexboxItem": true,
+      "blockLink": true,
+      "border": true,
+      "borderRadius": true
+    }
+  }
+}

package/resources/blocks/l-flexible-container/l-flexible-container.block.tsx

@@ -0,0 +1,97 @@
+import {
+  InnerBlocks,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  template: TemplateArray;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes } = props;
+
+  const blockProps = useBlockProps();
+  const parentBlockProps = useBlockParent();
+
+  /**
+   * Filter allowed blocks used in webentor/l-flexible-container inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.l-flexible-container.allowedBlocks',
+    null,
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/l-flexible-container inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.l-flexible-container.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <div
+      {...innerBlocksProps}
+      className={`${innerBlocksProps.className} wbtr-flexible-container wbtr:relative wbtr:p-2 wbtr:pt-4`}
+    >
+      <div className="wbtr:pointer-events-none wbtr:absolute wbtr:inset-0 wbtr:h-full wbtr:w-full wbtr:border wbtr:border-dashed wbtr:border-editor-border wbtr:p-2 wbtr:pt-4"></div>
+
+      <div className="wbtr:absolute wbtr:top-[2px] wbtr:left-2 wbtr:mb-1 wbtr:text-10 wbtr:opacity-50">
+        {__('Flexible Container', 'webentor')}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => <InnerBlocks.Content />;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/l-footer/block.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/l-footer",
+  "title": "Footer",
+  "description": "Footer block with various settings.",
+  "category": "webentor-layout",
+  "icon": "list-view",
+  "keywords": ["footer", "layout"],
+  "attributes": {
+    "sticky": {
+      "type": "string",
+      "default": ""
+    },
+    "hasContainer": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "supports": {
+    "anchor": true
+  }
+}

package/resources/blocks/l-footer/l-footer.block.tsx

@@ -0,0 +1,51 @@
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  sticky: string;
+  hasContainer: boolean;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes } = props;
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <>
+      {/* Custom footer */}
+
+      <div className="footer wbtr:bg-gray-50 wbtr:p-5 wbtr:text-center">
+        Footer which will be displayed dynamically on FE
+      </div>
+    </>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => null;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/l-formatted-content/block.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/l-formatted-content",
+  "apiVersion": 3,
+  "title": "Formatted Content",
+  "description": "Use this block to wrap your content to apply formatting styles.",
+  "category": "webentor-layout",
+  "icon": "text-page",
+  "keywords": ["formatted", "content"],
+  "attributes": {
+    "anchor": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "color": {
+      "background": true,
+      "text": true
+    },
+    "webentor": {
+      "spacing": true,
+      "border": true,
+      "borderRadius": true
+    }
+  }
+}

package/resources/blocks/l-formatted-content/l-formatted-content.block.tsx

@@ -0,0 +1,97 @@
+import {
+  InnerBlocks,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { useBlockParent } from '@webentorCore/blocks-utils/_use-block-parent';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  template?: TemplateArray;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes } = props;
+
+  const blockProps = useBlockProps();
+  const parentBlockProps = useBlockParent();
+
+  /**
+   * Filter allowed blocks used in webentor/l-formatted-content inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.l-formatted-content.allowedBlocks',
+    null,
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/l-formatted-content inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.l-formatted-content.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {
+    allowedBlocks,
+    template,
+  });
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <div
+      {...innerBlocksProps}
+      className={`${innerBlocksProps.className} format-content wbtr:relative wbtr:p-2 wbtr:pt-4`}
+    >
+      <div className="wbtr:pointer-events-none wbtr:absolute wbtr:inset-0 wbtr:h-full wbtr:w-full wbtr:border wbtr:border-dashed wbtr:border-editor-border wbtr:p-2 wbtr:pt-4"></div>
+
+      <div className="wbtr:absolute wbtr:top-[2px] wbtr:left-2 wbtr:mb-1 wbtr:text-10 wbtr:opacity-50">
+        {__('Formatted Content', 'webentor')}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => <InnerBlocks.Content />;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/l-header/block.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/l-header",
+  "title": "Header",
+  "description": "Header block with various settings.",
+  "category": "webentor-layout",
+  "icon": "list-view",
+  "keywords": [
+    "header",
+    "layout"
+  ],
+  "attributes": {
+    "sticky": {
+      "type": "string",
+      "default": ""
+    },
+    "hasContainer": {
+      "type": "boolean",
+      "default": true
+    }
+  },
+  "supports": {
+    "anchor": true
+  }
+}

package/resources/blocks/l-header/l-header.block.tsx

@@ -0,0 +1,100 @@
+// import {
+//   InspectorControls,
+//   useBlockProps,
+//   useInnerBlocksProps,
+// } from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+
+import block from './block.json';
+
+// import {
+//   PanelBody,
+//   PanelRow,
+//   SelectControl,
+//   ToggleControl,
+// } from '@wordpress/components';
+// import { __ } from '@wordpress/i18n';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+  sticky: string;
+  hasContainer: boolean;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes } = props;
+
+  // const blockProps = useBlockProps();
+  // const innerBlocksProps = useInnerBlocksProps(blockProps, {});
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <>
+      {/* <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <PanelRow>
+            <SelectControl
+              label={__('Sticky type', 'webentor-blocks')}
+              value={attributes.sticky}
+              options={[
+                { label: __('Not sticky', 'webentor-blocks'), value: '' },
+                { label: __('Sticky', 'webentor-blocks'), value: 'sticky' },
+                {
+                  label: __('Sticky w/ hide on scroll', 'webentor-blocks'),
+                  value: 'sticky-hide-scroll',
+                },
+              ]}
+              onChange={(sticky) => setAttributes({ sticky })}
+            />
+          </PanelRow>
+
+          <PanelRow>
+            <ToggleControl
+              label={__('Has container?', 'webentor-blocks')}
+              checked={attributes.hasContainer}
+              onChange={(hasContainer) => setAttributes({ hasContainer })}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <div
+        {...innerBlocksProps}
+        className={`${blockProps.className} ${innerBlocksProps.className} l-header border border-dashed border-editor-border p-2`}
+      /> */}
+
+      {/* Custom header */}
+
+      <div className="header wbtr:bg-gray-50 wbtr:p-5 wbtr:text-center">
+        Header which will be displayed dynamically on FE
+      </div>
+    </>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => null;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});

package/resources/blocks/l-mobile-nav/block.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/l-mobile-nav",
+  "title": "Mobile Navigation Wrapper",
+  "description": "Navigation menu block",
+  "category": "webentor-layout",
+  "icon": "menu",
+  "keywords": ["menu", "navigation", "mobile", "responsive", "hamburger"],
+  "attributes": {},
+  "supports": {
+    "webentor": {
+      "display": true
+    }
+  }
+}

package/resources/blocks/l-mobile-nav/l-mobile-nav.block.tsx

@@ -0,0 +1,56 @@
+import {
+  InnerBlocks,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+
+import block from './block.json';
+
+/**
+ * Edit component.
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
+ *
+ * @param {object}   props                      					The block props.
+ * @returns {Function}                                    Render the edit screen
+ */
+
+type AttributesType = {
+  coverImage: string;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes } = props;
+
+  const blockProps = useBlockProps();
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {});
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <>
+      <div
+        {...innerBlocksProps}
+        className={`${innerBlocksProps.className} wbtr:border wbtr:border-editor-border wbtr:p-4`}
+      />
+    </>
+  );
+};
+
+/**
+ * See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#save
+ *
+ * @return {null} Dynamic blocks do not save the HTML.
+ */
+const BlockSave = () => <InnerBlocks.Content />;
+
+/**
+ * Register block.
+ */
+registerBlockType(block, {
+  edit: BlockEdit,
+  save: BlockSave,
+});