Merge pull request #4 from 40Q/CU-86azgqma6_Quote-block

Cu 86azgqma6 quote block

app/Blocks/Quote.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Blocks;
+
+use BlockHandler\Contracts\BlockHandler;
+
+class Quote implements BlockHandler
+{
+    public function __invoke($block_content, $block)
+    {
+        return view('blocks.quote', [
+            'heading' => $block['attrs']['heading'] ?? '',
+            'text' => $block['attrs']['text'] ?? '',
+            'quote' => $block['attrs']['quote'] ?? '',
+            'author' => $block['attrs']['author'] ?? '',
+            'darkMode' => $block['attrs']['darkMode'] ?? false,
+        ]);
+    }
+}

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

@@ -0,0 +1,120 @@
+import { InspectorControls, useBlockProps, RichText} from "@wordpress/block-editor";
+import { PanelBody, ToggleControl } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import {
+  GetBlockAttributeValues,
+  GetSetAttributesFunction,
+} from "scripts/editor/utils/type-mapping";
+
+/* Block name */
+export const name = "by40q/quote";
+
+/* Block title */
+export const title = __("Quote", "40q");
+
+/* Block icon */
+export const icon = "format-image";
+
+/* Block category */
+export const category = "40q";
+
+/* Block attributes */
+export const attributes = {
+  "heading": {
+    "type": "string",
+    "default": "",
+  },
+  "text": {
+    "type": "string",
+    "default": "",
+  },
+  "quote": {
+    "type": "string",
+    "default": "",
+  },
+  "author": {
+    "type": "string",
+    "default": "",
+  },
+  "darkMode": {
+    "type": "boolean",
+    "default": "",
+  },
+} 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 { heading, text, quote, author, darkMode } = attributes;
+
+  const blockProps = useBlockProps({
+    className: `quote-block pt-23 pb-16 ${darkMode ? 'bg-primary-dark' : 'bg-white' }`,
+  });
+
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title={__("Quote Settings")} initialOpen>
+          <ToggleControl
+            label="Dark Mode"
+            checked={!!darkMode}
+            onChange={(darkMode) => setAttributes({ darkMode })}
+          />
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps}>
+        <div className="w-full flex gap-8 justify-center">
+          <div className="flex flex-col gap-4 pr-10 pt-2.5 w-5/12 flex-shrink-0 box-border items-end">
+            <RichText
+              tagName="h3"
+              className={`m-0 heading lg:text-2xl font-bold pr-5 tracking-wide relative  ${darkMode ? 'text-auxiliar after:bg-auxiliar' : 'text-primary-dark after:bg-primary-dark'} after:rounded-lg after:content-[''] after:w-3.5 after:h-3.5 after:-right-2.5 after:bg-cover after:bg-center after:top-1.5 after:absolute`}
+              placeholder={__("Heading")}
+              value={heading}
+              onChange={(heading) => setAttributes({ heading })}
+            />
+            <RichText
+              tagName="p"
+              className={`m-0 lg:text-xl text-end !leading-comfort ${darkMode ? 'text-white' : 'text-text'}`}
+              placeholder={__("Text")}
+              value={text}
+              onChange={(text) => setAttributes({ text })}
+            />
+          </div>
+          <div className="flex w-full items-end">
+            <RichText
+              tagName="p"
+              className={`m-0 lg:text-5xl font-light pl-16 tracking-wider !leading-tighter ${darkMode ? 'text-white' : 'text-text' } border-l-auxiliar border-l border-solid`}
+              placeholder={__("Quote")}
+              value={quote}
+              onChange={(quote) => setAttributes({ quote })}
+            />
+            <RichText
+              tagName="span"
+              className={`m-0 lg:text-5xl flex-shrink-0 ${darkMode ? 'text-auxiliar' : 'text-primary' }`}
+              placeholder={__("Author")}
+              value={author}
+              onChange={(author) => setAttributes({ author })}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+/* Block save */
+export const save = () => <></>;
+
+/* Block styles */
+export const styles = [];

resources/views/blocks/quote.blade.php

@@ -0,0 +1,30 @@
+<section class="quote-block py-17 md:pt-23 md:pb-16 {{ $darkMode ? 'bg-primary-dark' : 'bg-white' }}">
+  <div class="max-md:px-4 max-w-temp-container mx-auto">
+    <div class="w-full flex flex-col md:flex-row gap-8 md:gap-2 lg:gap-8 justify-center">
+      <div class="flex flex-col gap-4 md:pr-10 md:pt-2.5 md:w-5/12 flex-shrink-0 box-border md:items-end">
+        @if($heading)
+          <h3 class="heading text-2xl font-bold lg:pr-5 tracking-wide relative {{ $darkMode ? 'text-auxiliar lg:after:bg-auxiliar' : 'text-primary-dark lg:after:bg-primary-dark' }} lg:after:rounded-lg lg:after:content-[''] lg:after:w-3.5 lg:after:h-3.5 lg:after:-right-2.5 lg:after:bg-cover lg:after:bg-center lg:after:top-1.5 lg:after:absolute">
+            {!! $heading !!}
+          </h3>
+        @endif
+        @if($text)
+          <p class="text-xl md:text-end !leading-comfort {{ $darkMode ? 'text-white' : 'text-text' }}">
+            {!! $text !!}
+          </p>
+        @endif
+      </div>
+      <div class="flex w-full">
+        @if($quote)
+          <p class="text-4xl md:text-5xl font-light md:pl-10 lg:pl-16 tracking-wide md:tracking-wider !leading-tighter {{ $darkMode ? 'text-white' : 'text-text' }} md:border-l-auxiliar md:border-l md:border-solid">
+            {!! $quote !!}
+            @if($author)
+              <span class="text-4xl md:text-5xl {{ $darkMode ? 'text-auxiliar' : 'text-primary' }}">
+                {!! $author !!}
+              </span>
+            @endif
+          </p>
+        @endif
+      </div>
+    </div>
+  </div>
+</section>

tailwind.config.ts

@@ -76,13 +76,18 @@ export default {
         'temp-container': '1308px'
       },
       spacing: {
+        '3.5': '0.875rem',
         '17': '4.25rem',
+        '23': '5.75rem',
+        '25': '6.25rem',
         '3/5': '60%',
       },
       lineHeight: {
         '7.5': '1.875rem',
         '10.5': '2.625rem',
         '14': '3.5rem',
+        'tighter': '1.15',
+        'comfort': '1.75',
       },
       width: {
         '12/25': '48%',