Merge pull request #1 from 40Q/CU-86azgqjz1_Banner-block

Cu 86azgqjz1 banner block

app/Blocks/Banner.php

@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Blocks;
+
+use BlockHandler\Contracts\BlockHandler;
+
+class Banner implements BlockHandler
+{
+    public function __invoke($block_content, $block)
+    {
+        return view('blocks.banner', [
+            'eyebrow' => $block['attrs']['eyebrow'] ?? '',
+            'heading' => $block['attrs']['heading'] ?? '',
+            'text' => $block['attrs']['text'] ?? '',
+            'showEyebrow' => $block['attrs']['showEyebrow'] ?? true,
+            'showHeading' => $block['attrs']['showHeading'] ?? true,
+            'showText' => $block['attrs']['showText'] ?? true,
+            'id' => $block['attrs']['id'] ?? '',
+            'alt' => $block['attrs']['alt'] ?? '',
+            'buttonText' => $block['attrs']['buttonText'] ?? '',
+            'buttonHref' => $block['attrs']['buttonHref'] ?? '',
+        ]);
+    }
+}

app/View/Components/Button.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\View\Components;
+
+use Roots\Acorn\View\Component;
+
+class Button extends Component
+{
+    /**
+     * The button array
+     */
+    public $href;
+
+    public $type;
+
+    public $text;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct($href = null, $type = null, $text = null)
+    {
+        $this->href = $href;
+        $this->type = $type;
+        $this->text = $text;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\View\View|string
+     */
+    public function render()
+    {
+        return $this->view('components.button');
+    }
+}

app/View/Components/Image.php

@@ -0,0 +1,124 @@
+<?php
+
+namespace App\View\Components;
+
+use Roots\Acorn\View\Component;
+
+class Image extends Component
+{
+    public $image;
+
+    public $size;
+
+    public $attr;
+
+    public $container;
+
+    public $containerClass;
+
+    public $placeholder;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(mixed $image = null, string $size = 'large', string|null $class = null, string|null $alt = null, bool $lazy = true, bool $container = false)
+    {
+        $this->attr = [];
+
+        if ($class) {
+            $this->attr['class'] = $class;
+        }
+
+        if ($alt) {
+            $this->attr['alt'] = $alt;
+        }
+
+        $this->attr['loading'] = $lazy ? 'lazy' : false;
+
+        $this->container = $container;
+
+        $this->image = $this->display_image($image, $size, $this->attr);
+    }
+
+    /**
+     * Display Images
+     *
+     * @param [type] $image
+     * @return void
+     */
+    public function display_image($image, $image_size, $attr = '', $inline_svg = false)
+    {
+        $default_attr = [
+            'class' => 'img-fluid',
+        ];
+
+        // Get alt param
+        if (is_numeric($image) && wp_attachment_is_image($image)) {
+            $default_attr['alt'] = trim(strip_tags(get_post_meta($image, '_wp_attachment_image_alt', true)));
+        }
+
+        // New Attributes (Merge)
+        $attr = wp_parse_args($attr, $default_attr);
+        $attr = array_map('esc_attr', $attr);
+
+        // parsed attrs for html
+        $img_html_tags = '';
+        foreach ($attr as $name => $value) {
+            $img_html_tags .= " $name=" . '"' . $value . '"';
+        }
+
+        // If it's an ID act like WP normally does
+        if (is_numeric($image) && wp_attachment_is_image($image)) {
+            return wp_get_attachment_image($image, $image_size, 0, $attr);
+        }
+
+        // If it's an String
+        if (!is_array($image) && !is_object($image) && is_string($image)) {
+            // Pending Question: can we try and use wp_get_attachment_image via reverse lookup of the url??
+            $image_string = '<img src="' . $image . '" ' . $img_html_tags . '>';
+            return $image_string;
+        }
+
+        // If it's an array (from ACF Image field)
+        if (is_array($image)) {
+            // If it's an svg
+            if ($image['mime_type'] === 'image/svg+xml') {
+                if ($inline_svg == true) {
+                    $file_name = get_attached_file($image['ID']);
+                    if (file_exists($file_name)) {
+                        return file_get_contents($file_name);
+                    }
+                } else {
+                    return wp_get_attachment_image($image['ID'], $image_size, 0, $attr);
+                }
+            } else {
+                return wp_get_attachment_image($image['ID'], $image_size, 0, $attr);
+            }
+        }
+
+        // If it's an Object (rare)
+        if (is_object($image)) {
+            return wp_get_attachment_image($image->ID, $image_size, 0, $attr);
+        }
+
+        // If Image is empty
+        if ($image == null && $this->placeholder) {
+            return '<img src="' . $this->placeholder . '" ' . $img_html_tags . '>';
+        }
+
+        // Else
+        return false;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.image');
+    }
+}

app/View/Components/SectionHeader.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace App\View\Components;
+
+use Roots\Acorn\View\Component;
+
+class SectionHeader extends Component
+{
+    public $showEyebrow;
+    public $showHeading;
+    public $showText;
+
+    public $eyebrow;
+    public $heading;
+    public $text;
+    public $containerClasses;
+    public $eyebrowClasses;
+    public $headingClasses;
+    public $textClasses;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        $showEyebrow = false,
+        $showHeading = false,
+        $showText = false,
+        $eyebrow = '',
+        $heading = '',
+        $text = '',
+        $containerClasses = '',
+        $eyebrowClasses = '',
+        $headingClasses = '',
+        $textClasses = '',
+    ) {
+        $this->showEyebrow = $showEyebrow;
+        $this->showHeading = $showHeading;
+        $this->showText = $showText;
+
+        $this->eyebrow = $eyebrow;
+        $this->heading = $heading;
+        $this->text = $text;
+        $this->containerClasses = $containerClasses;
+        $this->eyebrowClasses = $eyebrowClasses;
+        $this->headingClasses = $headingClasses;
+        $this->textClasses = $textClasses;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\View\View|string
+     */
+    public function render()
+    {
+        return $this->view('components.section-header');
+    }
+}

app/View/Composers/App.php

@@ -24,7 +24,7 @@ public function with()
     {
         return [
             'containerClasses' => 'max-w-5xl mx-auto',
-            'containerInnerClasses' => 'px-6',
+            'containerInnerClasses' => '',
             'siteName' => $this->siteName(),
         ];
     }

public/content/themes/radicle/theme.json

@@ -146,6 +146,26 @@
           "color": "#1e1b4b",
           "name": "Indigo 950",
           "slug": "indigo-950"
+        },
+        {
+          "color": "#45c4af",
+          "name": "Primary",
+          "slug": "primary"
+        },
+        {
+          "color": "#dafdb9",
+          "name": "Auxiliar",
+          "slug": "auxiliar"
+        },
+        {
+          "color": "#13678b",
+          "name": "Primary-dark",
+          "slug": "primary-dark"
+        },
+        {
+          "color": "#f1ffee",
+          "name": "Back-light",
+          "slug": "back-light"
         }
       ]
     },

resources/scripts/editor/blocks/banner/banner.block.tsx

@@ -0,0 +1,89 @@
+import { InspectorControls, useBlockProps, RichText} from "@wordpress/block-editor";
+import { PanelBody, ToggleControl } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import {
+  attributes as imageAttributes,
+  Edit as ImageEdit,
+  Sidebar as ImageSidebar,
+} from "scripts/editor/components/image/image";
+import {
+  attributes as buttonAttributes,
+  Edit as ButtonEdit,
+  Sidebar as ButtonSidebar,
+} from "scripts/editor/components/button/button";
+import {
+  Edit as SectionHeaderEdit,
+  Sidebar as SectionHeaderSidebar,
+  attributes as sectionHeaderAttributes,
+} from "scripts/editor/components/section-header/section-header";
+import {
+  GetBlockAttributeValues,
+  GetSetAttributesFunction,
+} from "scripts/editor/utils/type-mapping";
+
+/* Block name */
+export const name = "by40q/banner";
+
+/* Block title */
+export const title = __("Banner", "40q");
+
+/* Block icon */
+export const icon = "format-image";
+
+/* Block category */
+export const category = "40q";
+
+/* Block attributes */
+export const attributes = {
+  ...sectionHeaderAttributes,
+  ...buttonAttributes,
+  ...imageAttributes,
+} as const;
+
+/* Block types */
+type BlockAttributeValues = GetBlockAttributeValues<typeof attributes>;
+type SetAttributesFunction = GetSetAttributesFunction<typeof attributes>;
+
+/* Block edit */
+export const edit = ({
+  attributes,
+  setAttributes,
+}: {
+  attributes: BlockAttributeValues;
+  setAttributes: SetAttributesFunction;
+}) => {
+  const blockProps = useBlockProps({
+    className: "relative py-12 px-16",
+  });
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title={__("Banner Settings")} initialOpen>
+          <SectionHeaderSidebar {...{ attributes, setAttributes }} />
+          <ButtonSidebar {...{ attributes, setAttributes }} />
+        </PanelBody>
+        <PanelBody title={__("Image Settings")} initialOpen>
+          <ImageSidebar {...{ attributes, setAttributes }} />
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps}>
+        <div className="relative z-50 [&>div>p]:text-white [&>div>h2]:text-white w-2/5">
+          <SectionHeaderEdit {...{ attributes, setAttributes }} />
+          <ButtonEdit {...{attributes, setAttributes}} />
+        </div>
+        <div className="absolute z-20 top-0 left-0 w-full h-full [&>div]:w-full [&>div]:h-full [&>div>img]:w-full [&>div>img]:h-full [&>div>img]:object-cover">
+          <ImageEdit {...{ attributes }} />
+        </div>
+        <div className="absolute top-0 left-0 w-full h-full z-20 bg-black opacity-50"></div>
+      </div>
+    </>
+  );
+};
+
+/* Block save */
+export const save = () => <></>;
+
+/* Block styles */
+export const styles = [];