@webikon/webentor-core 0.9.12

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

@@ -0,0 +1,316 @@
+import {
+  InnerBlocks,
+  InspectorControls,
+  MediaUpload,
+  MediaUploadCheck,
+  useBlockProps,
+  useInnerBlocksProps,
+} from '@wordpress/block-editor';
+import {
+  BlockEditProps,
+  registerBlockType,
+  TemplateArray,
+} from '@wordpress/blocks';
+import { Button, PanelBody, PanelRow } from '@wordpress/components';
+import { applyFilters } from '@wordpress/hooks';
+import { __ } from '@wordpress/i18n';
+
+import { setImmutably } from '@webentorCore/_utils';
+import {
+  CustomImageSizesPanel,
+  WebentorBlockAppender,
+} from '@webentorCore/blocks-components';
+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;
+  img?: { id: number; url: string; alt: string };
+  mobileImg?: { id: number; url: string; alt: string };
+  imgSize?: {
+    height: {
+      [key: string]: string;
+    };
+  };
+};
+
+const BlockEdit: React.FC<BlockEditProps<AttributesType>> = (props) => {
+  const { attributes, setAttributes, isSelected } = props;
+
+  const blockProps = useBlockProps();
+  const parentBlockProps = useBlockParent();
+
+  /**
+   * Filter allowed blocks used in webentor/l-section inner block
+   */
+  const allowedBlocks: string[] = applyFilters(
+    'webentor.core.l-section.allowedBlocks',
+    null,
+    blockProps,
+    parentBlockProps,
+  );
+
+  /**
+   * Filter template used in webentor/l-section inner block
+   */
+  const defaultTemplate: TemplateArray = attributes?.template ?? [];
+  const template: TemplateArray = applyFilters(
+    'webentor.core.l-section.template',
+    defaultTemplate,
+    blockProps,
+    parentBlockProps,
+  );
+
+  const { children, ...innerBlocksProps } = useInnerBlocksProps(
+    {},
+    {
+      allowedBlocks,
+      template,
+      renderAppender: false, // Disable default appender
+    },
+  );
+
+  // Preview image for block inserter
+  if (attributes.coverImage) {
+    return <img src={attributes.coverImage} width="468" />;
+  }
+
+  const hasInnerBlocks = children && React.Children.count(children) > 0;
+
+  const onSelectImage = (media) => {
+    setAttributes({
+      img: { id: media.id, url: media.url, alt: media.alt },
+    });
+  };
+
+  const removeImage = () => {
+    setAttributes({ img: null });
+  };
+
+  const onSelectMobileImage = (media) => {
+    setAttributes({
+      mobileImg: { id: media.id, url: media.url, alt: media.alt },
+    });
+  };
+
+  const removeMobileImage = () => {
+    setAttributes({ mobileImg: null });
+  };
+
+  const handleEnabledChange = (enabled: boolean, breakpoint: string) => {
+    // Set custom size enabled/disabled
+    // For some reason, this doesn't work with setImmutably
+    setAttributes({
+      imgSize: {
+        ...attributes?.imgSize,
+        enabled: {
+          ...attributes?.imgSize?.enabled,
+          [breakpoint]: enabled,
+        },
+      },
+    });
+  };
+
+  const handleHeightChange = (height: number, breakpoint: string) => {
+    setAttributes(
+      setImmutably(attributes, ['imgSize', 'height', breakpoint], height),
+    );
+  };
+
+  const handleCropChange = (crop: boolean, breakpoint: string) => {
+    setAttributes(
+      setImmutably(attributes, ['imgSize', 'crop', breakpoint], crop),
+    );
+  };
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="Background Image Settings" initialOpen={false}>
+          <PanelRow>
+            <div className="wbtr:flex wbtr:flex-col">
+              <p className="wbtr:mb-2 wbtr:uppercase">
+                {__('Desktop Image', 'webentor')}
+              </p>
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={onSelectImage}
+                  allowedTypes={['image']}
+                  value={attributes?.img?.id}
+                  render={({ open }) => (
+                    <Button
+                      onClick={open}
+                      className={
+                        attributes?.img?.id
+                          ? 'wbtr:h-fit! wbtr:w-fit! wbtr:p-0!'
+                          : ''
+                      }
+                      variant={attributes?.img?.id ? undefined : 'secondary'}
+                    >
+                      {attributes?.img?.id ? (
+                        <img
+                          src={attributes.img.url}
+                          alt={attributes.img?.alt}
+                          width="100%"
+                        />
+                      ) : (
+                        __('Select Desktop Image', 'webentor')
+                      )}
+                    </Button>
+                  )}
+                />
+              </MediaUploadCheck>
+
+              {attributes?.img?.id && (
+                <Button
+                  onClick={removeImage}
+                  className="wbtr:h-fit! wbtr:w-fit!"
+                  variant="link"
+                  isDestructive
+                >
+                  {__('Remove Desktop Image', 'webentor')}
+                </Button>
+              )}
+            </div>
+          </PanelRow>
+
+          <PanelRow>
+            <div className="wbtr:flex wbtr:flex-col">
+              <p className="wbtr:mb-2 wbtr:uppercase">
+                {__('Mobile Image', 'webentor')}
+              </p>
+              <div className="wbtr:mb-2">
+                Used for devices up to 480px screen width.
+              </div>
+              <MediaUploadCheck>
+                <MediaUpload
+                  onSelect={onSelectMobileImage}
+                  allowedTypes={['image']}
+                  value={attributes?.mobileImg?.id}
+                  render={({ open }) => (
+                    <Button
+                      onClick={open}
+                      className={
+                        attributes?.mobileImg?.id
+                          ? 'wbtr:h-fit! wbtr:w-fit! wbtr:p-0!'
+                          : ''
+                      }
+                      variant={
+                        attributes?.mobileImg?.id ? undefined : 'secondary'
+                      }
+                    >
+                      {attributes?.mobileImg?.id ? (
+                        <img
+                          src={attributes.mobileImg.url}
+                          alt={attributes.mobileImg?.alt}
+                          width="100%"
+                        />
+                      ) : (
+                        __('Select Mobile Image', 'webentor')
+                      )}
+                    </Button>
+                  )}
+                />
+              </MediaUploadCheck>
+
+              {attributes?.mobileImg?.id && (
+                <Button
+                  onClick={removeMobileImage}
+                  className="wbtr:h-fit! wbtr:w-fit!"
+                  variant="link"
+                  isDestructive
+                >
+                  {__('Remove Mobile Image', 'webentor')}
+                </Button>
+              )}
+            </div>
+          </PanelRow>
+
+          <PanelRow>
+            <CustomImageSizesPanel
+              attributes={attributes}
+              imgSizeAttribute="imgSize"
+              onEnabledChange={handleEnabledChange}
+              onHeightChange={handleHeightChange}
+              onCropChange={handleCropChange}
+              alwaysEnabled
+              hideWidth
+              noticeBefore={() => (
+                <>
+                  <div>
+                    Notice: This is not height used for the section/hero. Please
+                    set section height <strong>Container Settings</strong>.{' '}
+                    <br />
+                    Image Height settings below are needed just so image can be
+                    properly optimized, resized and cropped on frontend.
+                  </div>
+                  <br />
+                </>
+              )}
+            />
+          </PanelRow>
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps} className={`w-section ${blockProps.className}`}>
+        <div
+          {...innerBlocksProps}
+          className={`${innerBlocksProps.className} container wbtr:relative wbtr:z-[2] wbtr:flex wbtr:flex-col`}
+        >
+          {children}
+
+          {/* Only show appender if no inner blocks or if the block is selected */}
+          {(!hasInnerBlocks || isSelected) && (
+            <div className="wbtr:my-2 wbtr:flex wbtr:items-center wbtr:justify-center">
+              <WebentorBlockAppender
+                rootClientId={props.clientId}
+                text={__('Add Section Content', 'webentor')}
+              />
+            </div>
+          )}
+        </div>
+
+        {attributes?.img?.id && (
+          <>
+            <div className="wbtr:absolute wbtr:inset-0 wbtr:z-[1] wbtr:bg-black wbtr:opacity-20"></div>
+            <img
+              src={attributes.img.url}
+              alt="banner-img"
+              className="wbtr:absolute wbtr:top-0 wbtr:left-0 wbtr:hidden wbtr:!h-full wbtr:!w-full wbtr:object-cover wbtr:md:block"
+            />
+            <img
+              src={attributes.mobileImg?.url || attributes.img.url}
+              alt="banner-img"
+              className="wbtr:absolute wbtr:top-0 wbtr:left-0 wbtr:block wbtr:!h-full wbtr:!w-full wbtr:object-cover wbtr:md:hidden"
+            />
+          </>
+        )}
+      </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-site-logo/block.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../../schemas/webentor-block.json",
+  "name": "webentor/l-site-logo",
+  "title": "Site Logo",
+  "description": "Website logo with link to homepage",
+  "category": "webentor-layout",
+  "icon": "admin-site-alt3",
+  "keywords": [
+    "logo",
+    "site logo",
+    "website logo"
+  ],
+  "attributes": {},
+  "supports": {}
+}

package/resources/blocks/l-site-logo/l-site-logo.block.tsx

@@ -0,0 +1,54 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { BlockEditProps, registerBlockType } from '@wordpress/blocks';
+
+import block from './block.json';
+
+// TODO: Add logo image?
+// import Logo from '@images/svg/site-logo.svg';
+
+/**
+ * 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}`}>
+        Logo
+        {/* <img src={Logo} alt="Logo" className="mx-auto h-20 w-20" /> */}
+      </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/core-components/slider/slider.script.ts

@@ -0,0 +1,11 @@
+import { SliderComponent } from '@webentorCore/_slider';
+
+// Add initialization code
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.js-slider').forEach((element) => {
+    // Parse data-slider attribute to get params
+    const params = JSON.parse(element.getAttribute('data-slider') || '{}');
+
+    new SliderComponent(element, params);
+  });
+});

package/resources/core-components/slider/slider.style.css

@@ -0,0 +1,134 @@
+@layer components {
+  /** Plugins **/
+  @import 'swiper/css';
+  @import 'swiper/css/a11y';
+  @import 'swiper/css/navigation';
+  @import 'swiper/css/pagination';
+  @import 'swiper/css/effect-fade';
+
+  :root {
+    --slider-timer-progress: 0;
+
+    --slider-arrow-color: var(--color-gray-900);
+    --slider-arrow-color-inverted: var(--color-white);
+    --slider-arrow-height: 30px;
+    --slider-arrow-width: 30px;
+
+    --slider-pagination-color: var(--color-gray-900);
+    --slider-pagination-color-inverted: var(--color-white);
+
+    --slider-pagination-bullet-height: 8px;
+    --slider-pagination-bullet-width: 32px;
+    --slider-pagination-bullet-border-radius: var(--border-radius-full);
+    --slider-pagination-bullet-opacity: 0.4;
+    --slider-pagination-bullet-opacity-active: 1;
+  }
+
+  .slider-enabled {
+    .swiper-container {
+      .swiper-wrapper {
+        /* Reset all flex properties to initial (default) values to avoid conflicts with Swiper slider and Gutenberg responsive settings for other breakpoints */
+        display: flex; /* Swiper slider must always be flex */
+        gap: 0;
+        flex-direction: initial;
+        justify-content: initial;
+        align-items: initial;
+        align-content: initial;
+        flex-wrap: initial;
+        flex-grow: initial;
+        flex-shrink: initial;
+        flex-basis: initial;
+      }
+    }
+
+    .slider-pagination {
+      .swiper-pagination-bullets {
+        display: flex;
+
+        &.swiper-pagination-lock {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .slider {
+    &.has-autoplay-control {
+      .swiper-pagination-bullets.swiper-pagination-horizontal {
+        width: auto;
+      }
+
+      .slider-autoplay-icon--play {
+        display: block;
+      }
+
+      &.is-playing .slider-autoplay-icon--play {
+        display: none;
+      }
+
+      .slider-autoplay-icon--stop {
+        display: none;
+      }
+
+      &.is-playing .slider-autoplay-icon--stop {
+        display: block;
+      }
+
+      .slider-timer {
+        display: block;
+      }
+
+      .slider-timer-circle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        stroke-width: 4px;
+        stroke: currentcolor;
+        fill: none;
+        stroke-dashoffset: calc(125.6px * (1 - var(--slider-timer-progress)));
+        stroke-dasharray: 125.6; /* 2 * Math.PI * 20 */
+        transform: rotate(-90deg);
+      }
+    }
+
+    .slider-arrow-btn {
+      color: var(--slider-arrow-color);
+      width: var(--slider-arrow-width);
+      height: var(--slider-arrow-height);
+
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+
+    .slider-pagination,
+    .slider-timer {
+      color: var(--slider-pagination-color);
+    }
+
+    .slider-pagination-bullet {
+      background-color: currentcolor;
+      opacity: var(--slider-pagination-bullet-opacity);
+      width: var(--slider-pagination-bullet-width);
+      height: var(--slider-pagination-bullet-height);
+      border-radius: var(--slider-pagination-bullet-border-radius);
+
+      &.is-active {
+        opacity: var(--slider-pagination-bullet-opacity-active);
+      }
+    }
+
+    &.has-darkmode {
+      .slider-arrow-btn {
+        color: var(--slider-arrow-color-inverted);
+      }
+
+      .slider-pagination,
+      .slider-timer {
+        color: var(--slider-pagination-color-inverted);
+      }
+    }
+  }
+}

package/resources/scripts/editor.ts

@@ -0,0 +1,29 @@
+// Import all core blocks
+// TODO: maybe add filter to customize this list
+import '@blocks/e-accordion/e-accordion.block';
+import '@blocks/e-accordion-group/e-accordion-group.block';
+import '@blocks/e-breadcrumbs/e-breadcrumbs.block';
+import '@blocks/e-button/e-button.block';
+import '@blocks/e-gallery/e-gallery.block';
+import '@blocks/e-image/e-image.block';
+import '@blocks/e-picker-query-loop/e-picker-query-loop.block';
+import '@blocks/e-post-template/e-post-template.block';
+import '@blocks/e-query-loop/e-query-loop.block';
+import '@blocks/e-slider/e-slider.block';
+import '@blocks/e-svg/e-svg.block';
+import '@blocks/e-tab-container/e-tab-container.block';
+import '@blocks/e-table/e-table.block';
+import '@blocks/e-table-cell/e-table-cell.block';
+import '@blocks/e-table-row/e-table-row.block';
+import '@blocks/e-tabs/e-tabs.block';
+import '@blocks/l-404/l-404.block';
+import '@blocks/l-flexible-container/l-flexible-container.block';
+import '@blocks/l-footer/l-footer.block';
+import '@blocks/l-formatted-content/l-formatted-content.block';
+import '@blocks/l-header/l-header.block';
+import '@blocks/l-mobile-nav/l-mobile-nav.block';
+import '@blocks/l-nav-menu/l-nav-menu.block';
+import '@blocks/l-post-card/l-post-card.block';
+import '@blocks/l-section/l-section.block';
+import '@blocks/l-site-logo/l-site-logo.block';
+import '@blocks/e-icon-picker/e-icon-picker.block';

package/resources/styles/app.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss' prefix(wbtr);
+@source "../views/";
+@source "../core-components/";
+@source "../blocks/";
+@source "../../app/";
+
+/* Tailwind Config */
+@import './common/_theme';
+@import './common/_utilities';
+
+/** Common **/
+@import './common/_global';
+@import './common/_wordpress';
+@import './common/_form';
+
+/** Components */
+@import './components/_table';
+
+/** Partials */
+@import './partials/_header';
+@import './partials/_pagination';

package/resources/styles/common/_editor.css

@@ -0,0 +1,86 @@
+.post-type-post .editor-styles-wrapper {
+  font-family: var(--font-primary), serif;
+  max-width: 900px;
+  width: 100%;
+  margin: 0 auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.editor-styles-wrapper {
+  .has-primary-font-family {
+    font-family: var(--font-primary);
+  }
+
+  .has-heading-font-family {
+    font-family: var(--font-heading);
+  }
+
+  ul {
+    list-style: outside;
+    margin-left: 24px;
+  }
+}
+
+.w-link-settings {
+  .block-editor-link-control {
+    min-width: 100%;
+  }
+
+  .block-editor-url-input {
+    min-width: auto;
+    margin: 0;
+    padding: 0 16px;
+  }
+}
+
+.wp-block-post-title {
+  margin-bottom: 20px;
+}
+
+/* Margins for the content, which is added right to the root container, e.g. on blogs */
+.is-root-container {
+  > p,
+  > ul,
+  > ol,
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6,
+  > figure,
+  > .wp-block-embed,
+  > .wp-block-webentor-e-image {
+    margin-bottom: 20px;
+  }
+}
+
+.wp-block-webentor-e-image {
+  img {
+    max-height: 100%;
+  }
+}
+
+/* Dirty fix for hiding empty typography panel, see https://github.com/WordPress/gutenberg/issues/61231 */
+.typography-block-support-panel:has(
+    .components-tools-panel-header + :empty:last-child
+  ) {
+  display: none;
+}
+
+/* Fix responsive settings tabs */
+.w-responsive-settings-tabs {
+  .components-tab-panel__tabs {
+    justify-content: space-between;
+  }
+
+  .components-tab-panel__tabs-item {
+    padding: 0 6px;
+    flex-shrink: 0;
+
+    &.is-active {
+      font-weight: bold;
+    }
+  }
+}