Copilot Setup

.github/copilot-instructions.md

@@ -0,0 +1,115 @@
+You are an expert WordPress developer. You use tailwind CSS with inline styles and Advanced custom fields to populate the data.
+
+<!-- Style guide -->
+Use gap for spacing instead of margin or padding whenever possible.
+
+We use src/css as our styles folder and We use custom.css as our default stylesheet file
+
+Always include mobile, and desktop breakpoints on your answers, use inline tailwind CSS breakpoints when possible
+
+We utilize mobile as our default breakpoint. Therefore, we use flex directly instead of sm:flex for layouts, look at the example at the bottom of this file for clarity
+
+We always look for values to not be empty before rendering them
+
+Images positioned at the top of a page (above the fold) should always use fetchpriority="high".
+
+Images below the fold should always use loading="lazy"
+
+
+
+<!-- Blocks / ACF instructions -->
+
+When we ask for a new block use ACF v6 so that your answer is compatible with the use of the register_block_type function
+
+For each block, create a block.json file to register the block within the block's folder.
+look at the example at the bottom of this file for clarity:
+
+We do not utilize render callback functions when constructing blocks.
+
+We always escape our ACF outputs
+
+<!-- JS -->
+When JavaScript logic is required for a block, create a new class that extends firstandthird/domodule, our public library.
+
+<!-- code examples -->
+
+<!-- Hero example -->
+
+<?php
+/**
+ * Hero Block Template
+ */
+// Support custom "anchor" values.
+$anchor = '';
+if ( ! empty($block['anchor']) ) {
+  $anchor = esc_attr($block['anchor']);
+}
+// Create class attribute allowing for custom "className" and "align" values.
+$class_name = '';
+if ( ! empty($block['className']) ) {
+  $class_name .= ' ' . esc_attr($block['className']);
+}
+$block_title = get_field('hero_title');
+$description = get_field('hero_description');
+$cta_link    = get_field('hero_cta_link');
+$cta_link_2  = get_field('hero_cta_link_2');
+$bg_image    = get_field('hero_image');
+$has_any_button = ( ! empty($cta_link) || ! empty($cta_link_2) );
+?>
+
+<section
+<?php if ( ! empty($anchor) ) : ?>
+  id="<?= esc_attr($anchor); ?>"
+<?php endif; ?>
+  class="m2-hero-block m2-blocks alignfull p-0<?= esc_attr($class_name); ?>"
+>
+  <div class="relative w-full flex items-end pt-[380px] lg:pt-[492px] [@media(max-height:800px)]:pt-[80px]">
+    <?php if ( ! empty($bg_image) ) : ?>
+      <img class="absolute inset-0 w-full h-full object-cover" src="<?php echo esc_url($bg_image['url']); ?>" alt="" fetchpriority="high" />
+    <?php endif; ?>
+    <div class="flex flex-col gap-6 mx-5 lg:mr-[239px] lg:ml-0 text-white bg-brand-900 p-6 lg:py-10 lg:px-[90px] relative z-10">
+      <?php if ( ! empty($block_title) ) : ?>
+        <h1 class="text-white text-3xl lg:text-7xl [@media(max-height:800px)]:text-3xl"><?php echo esc_html($block_title); ?></h1>
+      <?php endif; ?>
+      <?php if ( ! empty($description) ) : ?>
+        <div class="[&_*]:text-xl leading-7">
+          <?php echo wp_kses_post($description); ?>
+        </div>
+      <?php endif; ?>
+      <?php if ( $has_any_button ) : ?>
+        <div class="mt-4 flex flex-row gap-x-5 gap-y-2">
+        <?php if ( ! empty($cta_link) ) : ?>
+          <a class="m2-button m2-button--filled m2-button--white" href="<?= esc_url($cta_link['url']); ?>">
+          <?php echo esc_html($cta_link['title']); ?>
+          </a>
+          <?php endif; ?>
+        <?php if ( ! empty($cta_link_2) ) : ?>
+          <a class="m2-button m2-button--outlined m2-button--white" href="<?= esc_url($cta_link_2['url']); ?>">
+          <?php echo esc_html($cta_link_2['title']); ?>
+          </a>
+          <?php endif; ?>
+        </div>
+      <?php endif; ?>
+    </div>
+  </div>
+</section>
+<!-- Tailwind CSS breakpoints example -->
+<div class="flex flex-col lg:flex-row gap-4 lg:gap-10"> </div>
+
+<!-- block.json example -->
+{
+  "name": "m2/hero",
+  "title": "M2 Hero",
+  "description": "A custom hero block.",
+  "category": "m2-blocks",
+  "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' height='16' width='16'><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d='M208 352h64c8.844 0 16-7.156 16-16S280.8 320 272 320h-64C199.2 320 192 327.2 192 336S199.2 352 208 352zM80 352h64C152.8 352 160 344.8 160 336S152.8 320 144 320h-64C71.16 320 64 327.2 64 336S71.16 352 80 352zM448 64H64C28.63 64 0 92.63 0 128v256c0 35.38 28.62 64 64 64h384c35.38 0 64-28.62 64-64V128C512 92.63 483.4 64 448 64zM480 384c0 17.62-14.38 32-32 32H64c-17.62 0-32-14.38-32-32V256h448V384zM480 224H32V128c0-17.62 14.38-32 32-32h384c17.62 0 32 14.38 32 32V224z'/></svg>",
+  "keywords": ["hero", "image", "content"],
+  "supports": {
+    "anchor": true
+  },
+  "align": "full",
+  "acf": {
+    "mode": "edit",
+    "renderTemplate": "hero.php"
+  }
+}

wp-content/themes/ft-client-theme/blocks/copilot-image-text/block.json

@@ -0,0 +1,16 @@
+{
+  "name": "m2/image-text",
+  "title": "Image Text",
+  "description": "A block with an image on the left and text on the right.",
+  "category": "m2-blocks",
+  "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' height='16' width='16'><path d='M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 392c0 4.418-3.582 8-8 8H72c-4.418 0-8-3.582-8-8v-16c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8V392zM224 296c0 4.418-3.582 8-8 8H72c-4.418 0-8-3.582-8-8v-16c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8V296zM224 200c0 4.418-3.582 8-8 8H72c-4.418 0-8-3.582-8-8v-16c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8V200zM432 392c0 4.418-3.582 8-8 8H280c-4.418 0-8-3.582-8-8v-16c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8V392zM432 296c0 4.418-3.582 8-8 8H280c-4.418 0-8-3.582-8-8v-16c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8V296zM432 200c0 4.418-3.582 8-8 8H280c-4.418 0-8-3.582-8-8v-16c0-4.418 3.582-8 8-8h144c4.418 0 8 3.582 8 8V200z'/></svg>",
+  "keywords": ["image", "text", "content"],
+  "supports": {
+    "anchor": true
+  },
+  "align": "full",
+  "acf": {
+    "mode": "edit",
+    "renderTemplate": "image-text.php"
+  }
+}

wp-content/themes/ft-client-theme/blocks/copilot-image-text/image-text.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Image Text Block Template
+ * Generated by Copilot
+ */
+
+// Support custom "anchor" values.
+$anchor = '';
+if ( ! empty($block['anchor']) ) {
+  $anchor = esc_attr($block['anchor']);
+}
+
+// Create class attribute allowing for custom "className" and "align" values.
+$class_name = '';
+if ( ! empty($block['className']) ) {
+  $class_name .= ' ' . esc_attr($block['className']);
+}
+
+// ACF Fields
+$image = get_field('image');
+$headline = get_field('headline');
+$text = get_field('text');
+?>
+
+<section
+<?php if ( ! empty($anchor) ) : ?>
+  id="<?= esc_attr($anchor); ?>"
+<?php endif; ?>
+  class="m2-image-text-block m2-blocks flex flex-col lg:flex-row gap-6 items-center<?= esc_attr($class_name); ?>"
+>
+  <?php if ( ! empty($image) ) : ?>
+    <div class="flex-shrink-0 w-full lg:w-1/2">
+      <img class="w-full h-auto object-cover" src="<?= esc_url($image['url']); ?>" alt="<?= esc_attr($image['alt']); ?>" fetchpriority="high" />
+    </div>
+  <?php endif; ?>
+
+  <div class="flex flex-col gap-4 w-full lg:w-1/2">
+    <?php if ( ! empty($headline) ) : ?>
+      <h2 class="text-2xl lg:text-4xl font-bold"><?= esc_html($headline); ?></h2>
+    <?php endif; ?>
+
+    <?php if ( ! empty($text) ) : ?>
+      <p class="text-base lg:text-lg leading-relaxed"><?= wp_kses_post($text); ?></p>
+    <?php endif; ?>
+  </div>
+</section>