generator-chisel 2.0.0-alpha.13 → 2.0.0-alpha.14

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 <!-- INSERT-NEW-ENTRIES-HERE -->
 
+## 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))

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

@@ -1,3 +1,4 @@
 /build
 /vendor
 /assets/hashes.php
+/.use-devcontainer

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/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;
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "chisel/acf-example-block",
+  "title": "Acf-example-block",
+  "description": "Example ACF Block - This file contains some specific acf settings in acf section. The renderCallback value must be the same for all acf blocks. There 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",
+  "acf": {
+      "mode": "preview",
+      "usePostMeta": false,
+      "renderCallback": "\\Chisel\\AcfBlocks::acf_block_render"
+  },
+  "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-acf/example/editor.scss

@@ -0,0 +1,3 @@
+.b-example {
+  color: red;
+}

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

@@ -0,0 +1,3 @@
+{#
+  This file name must be the same as the block folder name.
+#}

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+
+import './editor.scss';

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks-acf/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-acf/example/style.scss

@@ -0,0 +1,3 @@
+.b-example {
+  color: blue;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/assets/example-blocks/blocks-acf/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-acf/example/view.scss

@@ -0,0 +1,3 @@
+.b-example {
+  color: green;
+}

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

@@ -5,10 +5,9 @@
  * @package Chisel
  */
 
-use Chisel\ChiselCache;
+use Chisel\Helper\CacheHelpers;
 use Timber\Timber;
 
-$context          = Timber::context();
-$context['posts'] = Timber::get_posts();
+$context = Timber::context();
 
-Timber::render( array( 'author.twig', 'archive.twig' ), $context, ChiselCache::expiry() );
+Timber::render( array( 'author.twig', 'archive.twig' ), $context, CacheHelpers::expiry() );

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

@@ -9,7 +9,7 @@
  * @package Chisel
  */
 
-use Chisel\ChiselCache;
+use Chisel\Helper\CacheHelpers;
 
 $context = $GLOBALS['timberContext'];
 
@@ -21,4 +21,4 @@ $context['content'] = ob_get_contents();
 ob_end_clean();
 $templates = array( 'page-plugin.twig' );
 
-\Timber\Timber::render( $templates, $context, ChiselCache::expiry() );
+\Timber\Timber::render( $templates, $context, CacheHelpers::expiry() );

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

@@ -4,11 +4,9 @@ define( 'CHISEL_NAMESPACE', 'Chisel\\' );
 
 require_once get_template_directory() . '/vendor/autoload.php';
 
-$interfaces = glob( get_template_directory() . '/classes/interfaces/*.php' );
-
 spl_autoload_register(
-	function ( $class_name ) use ( $interfaces ) {
-		$base_directory = get_template_directory() . '/classes/';
+	function ( $class_name ) {
+		$base_directory = get_template_directory() . '/inc/';
 
 		$namespace_prefix_length = strlen( CHISEL_NAMESPACE );
 
@@ -16,11 +14,6 @@ spl_autoload_register(
 			return;
 		}
 
-		// Load interfaces.
-		foreach ( $interfaces as $interface ) {
-			require_once $interface;
-		}
-
 		$relative_class_name = substr( $class_name, $namespace_prefix_length );
 
 		$class_filename = $base_directory . str_replace( '\\', '/', $relative_class_name ) . '.php';
@@ -33,18 +26,19 @@ spl_autoload_register(
 
 Timber\Timber::init();
 
-\Chisel\Blocks::get_instance();
-\Chisel\Acf::get_instance();
-\Chisel\AcfBlocks::get_instance();
-\Chisel\Ajax::get_instance();
-\Chisel\Assets::get_instance();
-\Chisel\ChiselCache::get_instance();
-\Chisel\Comments::get_instance();
-\Chisel\GravityForms::get_instance();
-\Chisel\Site::get_instance();
-\Chisel\Sidebars::get_instance();
-\Chisel\Theme::get_instance();
-\Chisel\CustomPostTypes::get_instance();
-\Chisel\Twig::get_instance();
-\Chisel\Woocommerce::get_instance();
-\Chisel\Yoast::get_instance();
+\Chisel\Module\Ajax::get_instance();
+\Chisel\WP\Blocks::get_instance();
+\Chisel\WP\Acf::get_instance();
+\Chisel\WP\AcfBlocks::get_instance();
+\Chisel\WP\Assets::get_instance();
+\Chisel\WP\Cache::get_instance();
+\Chisel\WP\Comments::get_instance();
+\Chisel\WP\Site::get_instance();
+\Chisel\WP\Sidebars::get_instance();
+\Chisel\WP\Theme::get_instance();
+\Chisel\WP\CustomPostTypes::get_instance();
+\Chisel\WP\CustomTaxonomies::get_instance();
+\Chisel\WP\Twig::get_instance();
+\Chisel\Plugin\GravityForms::get_instance();
+\Chisel\Plugin\Woocommerce::get_instance();
+\Chisel\Plugin\Yoast::get_instance();

package/lib/commands/create/creators/app/chisel-starter-theme/inc/Factory/RegisterAcfOptionsPage.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace Chisel\Factory;
+
+/**
+ * Custom post types wrapper class.
+ *
+ * @package Chisel
+ */
+class RegisterAcfOptionsPage {
+
+	/**
+	 * Page arguments.
+	 *
+	 * @var array
+	 */
+	private $args;
+
+	/**
+	 * Page type - page or subpage.
+	 *
+	 * @var array
+	 */
+	private $type;
+
+	/**
+	 * Class constructor.
+	 *
+	 * @param array  $args  page arguments.
+	 * @param string $type  page or subpage.
+	 */
+	public function __construct( $args, $type = 'page' ) {
+		$this->args = $args;
+		$this->type = $type;
+	}
+
+	/**
+	 * Register ACF options page.
+	 */
+	private function register_options_page() {
+		$options_page_args = array(
+			'page_title'      => $this->args['page_title'],
+			'menu_title'      => isset( $this->args['menu_title'] ) ? $this->args['menu_title'] : $this->args['page_title'],
+			'menu_slug'       => $this->args['menu_slug'],
+			'capability'      => isset( $this->args['capability'] ) ? $this->args['capability'] : 'edit_posts',
+			'position'        => isset( $this->args['position'] ) ? $this->args['position'] : 45,
+			'redirect'        => isset( $this->args['redirect'] ) ? $this->args['redirect'] : true,
+			'icon_url'        => isset( $this->args['icon_url'] ) ? $this->args['icon_url'] : 'dashicons-screenoptions',
+			'post_id'         => isset( $this->args['post_id'] ) ? $this->args['post_id'] : 'options',
+			'autoload'        => isset( $this->args['autoload'] ) ? $this->args['autoload'] : false,
+			'update_button'   => isset( $this->args['update_button'] ) ? $this->args['update_button'] : __( 'Update', 'chisel' ),
+			'updated_message' => isset( $this->args['updated_message'] ) ? $this->args['updated_message'] : __( 'Options Updated', 'chisel' ),
+			'parent_slug'     => isset( $this->args['parent_slug'] ) ? $this->args['parent_slug'] : '',
+		);
+
+		if ( $this->type === 'subpage' ) {
+			acf_add_options_sub_page( $options_page_args );
+		} else {
+			acf_add_options_page( $options_page_args );
+		}
+	}
+}