diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 0000000..7abbc44 --- /dev/null +++ b/.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. + + +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" + + + + + +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 + + +When JavaScript logic is required for a block, create a new class that extends firstandthird/domodule, our public library. + + + + + + + +
+ id="" + + class="m2-hero-block m2-blocks alignfull p-0" +> +
+ + + +
+ +

+ + +
+ +
+ + +
+ + + + + + + + + + +
+ +
+
+
+ +
+ + +{ + "name": "m2/hero", + "title": "M2 Hero", + "description": "A custom hero block.", + "category": "m2-blocks", + "icon": "", + "keywords": ["hero", "image", "content"], + "supports": { + "anchor": true + }, + "align": "full", + "acf": { + "mode": "edit", + "renderTemplate": "hero.php" + } +} diff --git a/wp-content/themes/ft-client-theme/blocks/copilot-image-text/block.json b/wp-content/themes/ft-client-theme/blocks/copilot-image-text/block.json new file mode 100644 index 0000000..887b1e9 --- /dev/null +++ b/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": "", + "keywords": ["image", "text", "content"], + "supports": { + "anchor": true + }, + "align": "full", + "acf": { + "mode": "edit", + "renderTemplate": "image-text.php" + } +} diff --git a/wp-content/themes/ft-client-theme/blocks/copilot-image-text/image-text.php b/wp-content/themes/ft-client-theme/blocks/copilot-image-text/image-text.php new file mode 100644 index 0000000..6dffa64 --- /dev/null +++ b/wp-content/themes/ft-client-theme/blocks/copilot-image-text/image-text.php @@ -0,0 +1,46 @@ + + +
+ id="" + + class="m2-image-text-block m2-blocks flex flex-col lg:flex-row gap-6 items-center" +> + +
+ <?= esc_attr($image['alt']); ?> +
+ + +
+ +

+ + + +

+ +
+