@webikon/webentor-core 0.9.12

package/resources/blocks/l-mobile-nav/style.css

@@ -0,0 +1,54 @@
+.w-mobile-nav-icon {
+  width: 28px;
+  height: 20px;
+  position: relative;
+  transform: rotate(0deg);
+  transition: 0.5s ease-in-out;
+  cursor: pointer;
+
+  span {
+    display: block;
+    position: absolute;
+    height: 2px;
+    width: 100%;
+    background: var(--color-white);
+    border-radius: 0;
+    opacity: 1;
+    left: 0;
+    transform: rotate(0deg);
+    transition: 0.25s ease-in-out;
+  }
+
+  span:nth-child(1) {
+    top: 0;
+  }
+
+  span:nth-child(2),
+  span:nth-child(3) {
+    top: 9px;
+  }
+
+  span:nth-child(4) {
+    top: 18px;
+  }
+
+  &.open span:nth-child(1) {
+    top: 18px;
+    width: 0%;
+    left: 50%;
+  }
+
+  &.open span:nth-child(2) {
+    transform: rotate(45deg);
+  }
+
+  &.open span:nth-child(3) {
+    transform: rotate(-45deg);
+  }
+
+  &.open span:nth-child(4) {
+    top: 18px;
+    width: 0%;
+    left: 50%;
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/l-nav-menu",
+  "title": "Navigation Menu",
+  "description": "Navigation menu block",
+  "category": "webentor-layout",
+  "icon": "menu",
+  "keywords": [
+    "menu",
+    "navigation"
+  ],
+  "attributes": {
+    "menuId": {
+      "type": "string",
+      "default": "0"
+    },
+    "direction": {
+      "type": "string",
+      "default": "direction-row"
+    }
+  },
+  "supports": {
+    "webentor": {
+      "display": true
+    }
+  }
+}

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

@@ -0,0 +1,109 @@
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+import { PanelBody, PanelRow, SelectControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+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;
+  menuId: string;
+  direction: string;
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes, clientId } = props;
+
+  const blockProps = useBlockProps();
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  const menus = useSelect(
+    (select) => {
+      const { getMenus } = select('core');
+      const menus = getMenus();
+
+      return menus;
+    },
+    [clientId],
+  );
+
+  // TODO: check if works with Polylang
+  const menuOptions = menus?.map((menu) => ({
+    label: menu.name,
+    value: menu.id,
+  }));
+  // Prepend default option
+  menuOptions?.unshift({ label: '-', value: '' });
+
+  if (!menus) {
+    return 'Loading menus...';
+  }
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Block Settings" initialOpen={true}>
+          <PanelRow>
+            <SelectControl
+              label={__('Nav Menu', 'webentor')}
+              value={attributes.menuId}
+              options={menuOptions}
+              onChange={(menuId) => setAttributes({ menuId })}
+            />
+          </PanelRow>
+
+          <PanelRow>
+            <SelectControl
+              label={__('Direction', 'webentor')}
+              value={attributes.direction}
+              options={[
+                { label: 'Row', value: 'direction-row' },
+                { label: 'Column', value: 'direction-col' },
+              ]}
+              onChange={(direction) => setAttributes({ direction })}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps} className={`${blockProps.className}`}>
+        <div className="wbtr:bg-editor-border wbtr:p-2">
+          {`Menu: `}
+          {/* Find item in menuOptions which matches menuId */}
+          {
+            menuOptions?.find((item) => +item.value == +attributes.menuId)
+              ?.label
+          }
+        </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-nav-menu/style.css

@@ -0,0 +1,134 @@
+/* TODO maybe adjust nested CSS to be compatible with native nesting */
+.menu-container {
+  .menu-item {
+    font-family: var(--font-primary);
+    font-size: 18px;
+    font-weight: 500;
+
+    > a {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px;
+      color: var(--color-primary);
+
+      &:hover {
+        color: var(--color-primary-alt);
+        text-decoration: underline;
+      }
+    }
+  }
+
+  /* Horizontal menu style */
+  &.direction-row {
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+    }
+
+    .menu-item {
+      position: relative;
+
+      > a {
+        color: var(--color-white);
+
+        &:hover {
+          color: var(--color-primary-alt);
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .menu-item-has-children {
+      > a {
+        &::after {
+          width: 12px;
+          height: 13px;
+          display: inline-block;
+          content: '';
+          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 3.875L6 9.125L11.25 3.875' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+            no-repeat 50% 50%;
+          mask-size: cover;
+          background-color: var(--color-white);
+        }
+
+        &:hover::after {
+          background-color: var(--color-primary-alt);
+        }
+      }
+
+      .sub-menu {
+        display: none;
+        position: absolute;
+        background-color: var(--color-white);
+        white-space: nowrap;
+        border-bottom: 2px solid var(--color-primary);
+
+        .menu-item a {
+          color: var(--color-primary);
+          font-size: 16px;
+
+          &:hover {
+            color: var(--color-primary-alt);
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &:hover {
+        .sub-menu {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          padding: 12px 18px;
+        }
+      }
+    }
+  }
+
+  /* Vertical menu style */
+  &.direction-col {
+    ul {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .menu-item-has-children {
+      > a {
+        color: var(--color-gray-200);
+      }
+
+      .sub-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .menu-item a {
+          font-size: 16px;
+          padding-left: 16px;
+        }
+      }
+    }
+  }
+
+  /* Footer menu style */
+  footer & .menu {
+    gap: 16px;
+
+    .menu-item {
+      font-size: 16px;
+      font-weight: 400;
+
+      a {
+        color: var(--color-primary);
+        padding: 0;
+
+        &:hover {
+          color: var(--color-white);
+        }
+      }
+    }
+  }
+}

package/resources/blocks/l-post-card/block.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/l-post-card",
+  "title": "Post Card",
+  "description": "Post card for use in e.g. posts loop.",
+  "category": "webentor-layout",
+  "icon": "embed-post",
+  "keywords": ["post-card", "post", "post-template"],
+  "usesContext": ["itemNumber"],
+  "attributes": {},
+  "supports": {}
+}

package/resources/blocks/l-post-card/l-post-card.block.tsx

@@ -0,0 +1,52 @@
+import { useBlockProps } 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();
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  return (
+    <>
+      <div {...blockProps} className={`${blockProps.className}`}>
+        <div className="wbtr:bg-editor-border wbtr:p-4">
+          Post Card placeholder
+        </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-section/block.json

@@ -0,0 +1,89 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "apiVersion": 3,
+  "name": "webentor/l-section",
+  "title": "Section",
+  "description": "Section wrapper",
+  "category": "webentor-layout",
+  "icon": "align-wide",
+  "keywords": [
+    "section",
+    "container",
+    "layout"
+  ],
+  "attributes": {
+    "img": {
+      "type": "object",
+      "default": null
+    },
+    "mobileImg": {
+      "type": "object",
+      "default": null
+    },
+    "imgSize": {
+      "type": "object",
+      "default": null
+    },
+    "spacing": {
+      "type": "object",
+      "default": {
+        "padding-top": {
+          "value": {
+            "basic": "pt-10",
+            "lg": "pt-20"
+          }
+        },
+        "padding-bottom": {
+          "value": {
+            "basic": "pb-10",
+            "lg": "pb-20"
+          }
+        }
+      }
+    },
+    "display": {
+      "type": "object",
+      "default": {
+        "display": {
+          "value": {
+            "basic": "flex"
+          }
+        }
+      }
+    },
+    "flexbox": {
+      "type": "object",
+      "default": {
+        "flex-direction": {
+          "value": {
+            "basic": "flex-col"
+          }
+        }
+      }
+    },
+    "anchor": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "supports": {
+    "anchor": true,
+    "color": {
+      "text": true,
+      "background": true
+    },
+    "webentor": {
+      "spacing": true,
+      "display": {
+        "height": true,
+        "minHeight": true,
+        "display": true
+      },
+      "flexbox": true,
+      "flexboxItem": true,
+      "grid": true,
+      "border": true,
+      "borderRadius": true
+    }
+  }
+}