generator-chisel 2.0.0-alpha.8 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,63 @@
 
 <!-- INSERT-NEW-ENTRIES-HERE -->
 
+## 2.0.0 (2025-04-07)
+
+- Update chisel version and readme ([0aca167](https://github.com/xfiveco/generator-chisel/commit/0aca167))
+
+## 2.0.0-alpha.18 (2025-03-18)
+
+- fix Interfaces and Traits namespaces in php < 8, add nvmrc to root folder ([cb60f42](https://github.com/xfiveco/generator-chisel/commit/cb60f42))
+- update readme ([204adbe](https://github.com/xfiveco/generator-chisel/commit/204adbe))
+
+## 2.0.0-alpha.17 (2025-03-17)
+
+- add ajax nonce, chisel readme and GF fix ([4738035](https://github.com/xfiveco/generator-chisel/commit/4738035))
+- Publish ([8e3e3d2](https://github.com/xfiveco/generator-chisel/commit/8e3e3d2))
+
+## 2.0.0-alpha.16 (2025-02-04)
+
+- blocks, scripts, images optimize, mega menu settings ([d8a8b3c](https://github.com/xfiveco/generator-chisel/commit/d8a8b3c))
+
+## 2.0.0-alpha.15 (2024-12-06)
+
+- icons add color param and improve caching keys ([9619163](https://github.com/xfiveco/generator-chisel/commit/9619163))
+- integrate icons feature, get_icon twig function with cache ([3612fe9](https://github.com/xfiveco/generator-chisel/commit/3612fe9))
+- Merge branch 'v2-feature-icons-improved' of github.com:xfiveco/generator-chisel into v2-feature-icon ([cc45f09](https://github.com/xfiveco/generator-chisel/commit/cc45f09))
+- feature: added missing files for icons ([772d4c4](https://github.com/xfiveco/generator-chisel/commit/772d4c4))
+- feature: icons - improved icon.twig, updated examples preview, styles adjustments ([7b31431](https://github.com/xfiveco/generator-chisel/commit/7b31431))
+- refactor: icons.mjs - updated preview generation ([16f7792](https://github.com/xfiveco/generator-chisel/commit/16f7792))
+- fix: added missing files ([fd93bac](https://github.com/xfiveco/generator-chisel/commit/fd93bac))
+
+## 2.0.0-alpha.14 (2024-12-04)
+
+- adjust base version logic, remove compose version ([69f340e](https://github.com/xfiveco/generator-chisel/commit/69f340e))
+- run git hooks in devcontainer if .use-devcontainer is present ([d4fc782](https://github.com/xfiveco/generator-chisel/commit/d4fc782))
+- theme refactor, example blocks, bugs fixes ([96bf7ce](https://github.com/xfiveco/generator-chisel/commit/96bf7ce))
+
+## 2.0.0-alpha.13 (2024-11-12)
+
+- Adjust command ([c1b4471](https://github.com/xfiveco/generator-chisel/commit/c1b4471))
+
+## 2.0.0-alpha.12 (2024-11-12)
+
+- Try adjusting commands ([1c322a0](https://github.com/xfiveco/generator-chisel/commit/1c322a0))
+
+## 2.0.0-alpha.11 (2024-11-12)
+
+- V2: Add Devcontainers (#538) ([b878421](https://github.com/xfiveco/generator-chisel/commit/b878421)), closes [#538](https://github.com/xfiveco/generator-chisel/issues/538)
+- composer, wp-config, plugins list updates ([642f983](https://github.com/xfiveco/generator-chisel/commit/642f983))
+
+## 2.0.0-alpha.10 (2024-10-31)
+
+- add assets index ([fed4fd3](https://github.com/xfiveco/generator-chisel/commit/fed4fd3))
+- CPTs, assets, blocks changes and fixes ([0014d9b](https://github.com/xfiveco/generator-chisel/commit/0014d9b))
+- ignore assets index ([b951521](https://github.com/xfiveco/generator-chisel/commit/b951521))
+
+## 2.0.0-alpha.9 (2024-10-18)
+
+- fixes, adjustments, optimize ([f73f855](https://github.com/xfiveco/generator-chisel/commit/f73f855))
+
 ## 2.0.0-alpha.8 (2024-10-07)
 
 - fixes ([4cdc3e1](https://github.com/xfiveco/generator-chisel/commit/4cdc3e1))

package/bin/chisel.js

@@ -19,6 +19,12 @@ const createProgram = () => {
       '--link',
       'link Chisel packages (yarn link) in created project (for development)',
     )
+    .option('--devcontainer', 'create devcontainer', false)
+    .option(
+      '--devcontainer-complete <details>',
+      'complete creation inside devcontainer',
+      false
+    )
     .action((...args) => {
       const cmd = args.slice(-1)[0];
       args = args.slice(0, -1);

package/lib/commands/create/Creator.js

@@ -15,6 +15,12 @@ module.exports = class Creator {
     this.args = opts.args;
     this.cmd = opts.cmd;
     this.index = 0;
+
+    if (this.cmd.devcontainerComplete) {
+      this.data.devcontainerComplete = JSON.parse(
+        Buffer.from(this.cmd.devcontainerComplete, 'base64').toString(),
+      );
+    }
   }
 
   schedule(priority, action) {

package/lib/commands/create/creators/app/chisel-starter-theme/.gitignore.chisel-tpl

@@ -1,4 +1,5 @@
 /build
 /vendor
-package-lock.json
-composer.lock
+/node_modules
+/assets/hashes.php
+/.use-devcontainer

package/lib/commands/create/creators/app/chisel-starter-theme/.nvmrc

@@ -1 +1 @@
-20
+20.12.2

package/lib/commands/create/creators/app/chisel-starter-theme/404.php

@@ -5,7 +5,7 @@
  * @package Chisel
  */
 
-use Chisel\ChiselCache;
+use Chisel\Helper\CacheHelpers;
 use Timber\Timber;
 
 $context = Timber::context();
@@ -13,4 +13,4 @@ $context = Timber::context();
 $context['post']['ID']    = 'error-404';
 $context['post']['class'] = 'is-404';
 
-Timber::render( '404.twig', $context, ChiselCache::expiry() );
+Timber::render( '404.twig', $context, CacheHelpers::expiry() );

package/lib/commands/create/creators/app/chisel-starter-theme/README.md

@@ -1,3 +1,39 @@
-# Chisel WP Theme
+# Chisel Wordpress Theme
 
 ## Wordpress Starter Theme based on Timber library
+
+Chisel is a Wordpress Starter Theme powered by Timber library that helps to seprate the logic from view by using Twig engine to render html content. It also simplifies the code, makes it more readable and speeds up development.
+
+## Installation
+
+Use node version `20.12.2`
+
+Chisel is installed as a npm package using npx command: `npx generator-chisel`, which installs the whole projet for you including composer and node dependencies, however when you join the project and clone the repository, follow these steps to start the local developent:
+
+1. Go to the theme folder
+2. Run `composer install`
+3. Run `npm install`
+4. Run `npm run wp-config`
+
+    After creating the wp-config-local.php file make sure you have these lines in the file:
+
+    ```php
+    define( 'WP_DEBUG', true );
+    define( 'WP_DEBUG_LOG', true );
+    define( 'WP_DEBUG_DISPLAY', false );
+
+    // Required for the theme fast refresh mode.
+    define( 'SCRIPT_DEBUG', true );
+    define( 'WP_ENVIRONMENT_TYPE', 'development' );
+    ```
+
+5. Run `npm run build`
+
+    The local url for the new project should be `project-name.test`
+
+6. Run `npm run dev` to start local development. The url for local development is the same with "fast refresh" mode enabled for CSS and JavaScript.
+
+## Known issues
+
+1. Browser keeps refreshing after starting the dev mode - *Open dev tools (Chrome) Network tab, select "Disable cache" checkbox and refresh the browser*.
+2. Css does not refresh after modifying the styles - *Same as #1*

package/lib/commands/create/creators/app/chisel-starter-theme/acf-json/group_6772609e3c28c.json

@@ -0,0 +1,83 @@
+{
+    "key": "group_6772609e3c28c",
+    "title": "Mega Menu",
+    "fields": [
+        {
+            "key": "field_6772609e2dd03",
+            "label": "Enable Mega Menu",
+            "name": "mega_menu_enable",
+            "aria-label": "",
+            "type": "button_group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "yes": "Yes",
+                "no": "No"
+            },
+            "default_value": "no",
+            "return_format": "value",
+            "allow_null": 0,
+            "allow_in_bindings": 0,
+            "layout": "horizontal"
+        },
+        {
+            "key": "field_677260eefd533",
+            "label": "Number of Columns",
+            "name": "mega_menu_columns",
+            "aria-label": "",
+            "type": "button_group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": [
+                [
+                    {
+                        "field": "field_6772609e2dd03",
+                        "operator": "==",
+                        "value": "yes"
+                    }
+                ]
+            ],
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "1": "1",
+                "2": "2",
+                "3": "3",
+                "4": "4"
+            },
+            "default_value": 3,
+            "return_format": "value",
+            "allow_null": 0,
+            "allow_in_bindings": 1,
+            "layout": "horizontal"
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "nav_menu",
+                "operator": "==",
+                "value": "location\/chisel_main_nav"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1735549249
+}

package/lib/commands/create/creators/app/chisel-starter-theme/acf-json/group_6772615562fb4.json

@@ -0,0 +1,49 @@
+{
+    "key": "group_6772615562fb4",
+    "title": "Mega Menu - Submenu",
+    "fields": [
+        {
+            "key": "field_67726155705fb",
+            "label": "Switch to default submenu",
+            "name": "mega_menu_default_dropdown",
+            "aria-label": "",
+            "type": "button_group",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "choices": {
+                "yes": "Yes",
+                "no": "No"
+            },
+            "default_value": "no",
+            "return_format": "value",
+            "allow_null": 0,
+            "allow_in_bindings": 0,
+            "layout": "horizontal"
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "nav_menu_item",
+                "operator": "==",
+                "value": "location\/chisel_main_nav"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1735549736
+}

package/lib/commands/create/creators/app/chisel-starter-theme/archive.php

@@ -5,7 +5,7 @@
  * @package Chisel
  */
 
-use Chisel\ChiselCache;
+use Chisel\Helper\CacheHelpers;
 use Timber\Timber;
 
 $templates = array( 'archive.twig', 'index.twig' );
@@ -22,6 +22,4 @@ if ( is_tag() ) {
 	array_unshift( $templates, 'archive-' . get_queried_object()->taxonomy . '.twig' );
 }
 
-$context['posts'] = Timber::get_posts();
-
-Timber::render( $templates, $context, ChiselCache::expiry() );
+Timber::render( $templates, $context, CacheHelpers::expiry() );

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/block.json

@@ -0,0 +1,31 @@
+{
+  "name": "chisel/example-block",
+  "title": "example-block",
+  "description": "Example Block - This file contains the block settings. There is one custom setting, called ignoreScript, which should be used in cases when you use the script only to import scss - adding the script key to the ignoreScripts array will prevent the script from being loaded. The style array contains two values, because if the style.scss is imprted into both script.js and index.js two files will be built. All scripts and styles values may be arrays or strings.",
+  "category": "chisel-blocks",
+  "icon": "carrot",
+  "apiVersion": 3,
+  "keywords": ["example", "block"],
+  "textdomain": "chisel",
+  "styles": [
+    { "name": "default", "label": "Default", "isDefault": true },
+    { "name": "other", "label": "Other" }
+  ],
+  "supports": {
+    "anchor": true,
+    "align": false,
+    "alignWide": false,
+    "alignContent": false,
+    "className": true,
+    "customClassName": true,
+    "multiple": true,
+    "reusable": true
+  },
+  "ignoreScripts": ["script"],
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": ["file:./style-index.css", "file:./style-script.css"],
+  "script": "file:./script.js",
+  "viewScript": "file:./view.js",
+  "viewStyle": "file:./view.css"
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/edit.js

@@ -0,0 +1,35 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './editor.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {Element} Element to render.
+ */
+// eslint-disable-next-line no-unused-vars
+export default function Edit(props) {
+  return <div {...useBlockProps()}>{__('This is an example block.', 'chisel')}</div>;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/editor.scss

@@ -0,0 +1,3 @@
+.wp-chisel-example-block {
+  border: 1px solid green;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/index.js

@@ -0,0 +1,45 @@
+/**
+ * This file is loaded in the editor only.
+ *
+ * You must import the scss file in order for css file to be built in the build folder.
+ */
+
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(metadata.name, {
+  /**
+   * @see ./edit.js
+   */
+  edit: Edit,
+
+  /**
+   * @see ./save.js
+   */
+  save,
+});

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/save.js

@@ -0,0 +1,20 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+ *
+ * @return {Element} Element to render.
+ */
+export default function save() {
+  return <p {...useBlockProps.save()}>{'Example Block – hello from the saved content!'}</p>;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/script.js

@@ -0,0 +1,7 @@
+/**
+ * This file is loaded in the editor and frontend.
+ *
+ * You must import the scss file in order for css file to be built in the build folder.
+ */
+
+import './style.scss';

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/style.scss

@@ -0,0 +1,3 @@
+.wp-chisel-example-block {
+  border: 1px solid blue;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/view.js

@@ -0,0 +1,7 @@
+/**
+ * This file is loaded in frontend only.
+ *
+ * You must import the scss file in order for css file to be built in the build folder.
+ */
+
+import './view.scss';

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example/view.scss

@@ -0,0 +1,3 @@
+.wp-chisel-example-block {
+  border: 1px solid green;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/block.json

@@ -0,0 +1,32 @@
+{
+  "name": "chisel/example-server-side-block",
+  "title": "example-server-side-block",
+  "description": "Example Block - This file contains the block settings. There is one custom setting, called ignoreScript, which should be used in cases when you use the script only to import scss - adding the script key to the ignoreScripts array will prevent the script from being loaded. The style array contains two values, because if the style.scss is imprted into both script.js and index.js two files will be built. All scripts and styles values may be arrays or strings. In order to render the block on the server side add render setting with the render.php file name and use ServerSideRender component in edit.js file.",
+  "category": "chisel-blocks",
+  "icon": "carrot",
+  "apiVersion": 3,
+  "keywords": ["example", "block"],
+  "textdomain": "chisel",
+  "styles": [
+    { "name": "default", "label": "Default", "isDefault": true },
+    { "name": "other", "label": "Other" }
+  ],
+  "supports": {
+    "anchor": true,
+    "align": false,
+    "alignWide": false,
+    "alignContent": false,
+    "className": true,
+    "customClassName": true,
+    "multiple": true,
+    "reusable": true
+  },
+  "ignoreScripts": ["script"],
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": ["file:./style-index.css", "file:./style-script.css"],
+  "script": "file:./script.js",
+  "viewScript": "file:./view.js",
+  "viewStyle": "file:./view.css",
+  "render": "file:./render.php"
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/edit.js

@@ -0,0 +1,33 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './editor.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {Element} Element to render.
+ */
+// eslint-disable-next-line no-unused-vars
+export default function Edit(props) {
+  return (
+    <div {...useBlockProps()}>
+      <ServerSideRender block="chisel/example-server-side-block" />
+    </div>
+  );
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/editor.scss

@@ -0,0 +1,3 @@
+.wp-chisel-example-block {
+  border: 1px solid green;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/index.js

@@ -0,0 +1,45 @@
+/**
+ * This file is loaded in the editor only.
+ *
+ * You must import the scss file in order for css file to be built in the build folder.
+ */
+
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(metadata.name, {
+  /**
+   * @see ./edit.js
+   */
+  edit: Edit,
+
+  /**
+   * @see ./save.js
+   */
+  save,
+});

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/render.php

@@ -0,0 +1,12 @@
+<?php
+
+use Chisel\Blocks;
+
+$context = array(
+	'wrapper_attributes' => get_block_wrapper_attributes(),
+	'attributes'         => $attributes,
+	'content'            => $content,
+	'block'              => $block,
+);
+
+Blocks::render_twig_file( $block->name, $context );

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/render.twig

@@ -0,0 +1,5 @@
+
+
+<div {{ wrapper_attributes }}>
+  hej ho ho
+</div>

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/save.js

@@ -0,0 +1,6 @@
+/**
+ * For server side rendering we do not need to save anything, so we return null.
+ */
+export default function save() {
+  return null;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/script.js

@@ -0,0 +1,7 @@
+/**
+ * This file is loaded in the editor and frontend.
+ *
+ * You must import the scss file in order for css file to be built in the build folder.
+ */
+
+import './style.scss';

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/style.scss

@@ -0,0 +1,3 @@
+.wp-chisel-example-block {
+  border: 1px solid blue;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/view.js

@@ -0,0 +1,7 @@
+/**
+ * This file is loaded in frontend only.
+ *
+ * You must import the scss file in order for css file to be built in the build folder.
+ */
+
+import './view.scss';

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks/example-server-side/view.scss

@@ -0,0 +1,3 @@
+.wp-chisel-example-block {
+  border: 1px solid green;
+}