Feature/WDSUS-46 Block Registration

.nvmrc

@@ -1 +1,2 @@
 18
+hoist=true

CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. Dates are displayed in UTC.
+
+Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
+
+## 1.0.0
+
+- Update composer [`#66`](https://github.com/WebDevStudios/wd_f/pull/66)
+- Feature/WDSUS-41 Design System [`#50`](https://github.com/WebDevStudios/wd_f/pull/50)
+- Feature/WDSUS-39 Cleanup Deprecated Packages [`#49`](https://github.com/WebDevStudios/wd_f/pull/49)
+- Feature/WDSUS-40 fix templates [`#48`](https://github.com/WebDevStudios/wd_f/pull/48)
+- Bump autoprefixer from 10.4.14 to 10.4.15 [`#47`](https://github.com/WebDevStudios/wd_f/pull/47)
+- Feature/wdsus 38 documentation [`#45`](https://github.com/WebDevStudios/wd_f/pull/45)
+- 38 create a block specific build pattern so scss and css can be local to the block folder [`#44`](https://github.com/WebDevStudios/wd_f/pull/44)
+- Feature/cleanup [`#42`](https://github.com/WebDevStudios/wd_f/pull/42)
+- Feature/Fix Linting Errors [`#36`](https://github.com/WebDevStudios/wd_f/pull/36)
+- Add the final find and replace fix. [`#34`](https://github.com/WebDevStudios/wd_f/pull/34)
+- Fix / WDSUS-34 overhaul templates, ensuring proper alignment [`#35`](https://github.com/WebDevStudios/wd_f/pull/35)
+- Feature/wdsus 32 remove old templates and cleanup [`#24`](https://github.com/WebDevStudios/wd_f/pull/24)
+- Add a readme.txt with a copyright notice. [`#31`](https://github.com/WebDevStudios/wd_f/pull/31)
+- Add an outline for blocks [`#21`](https://github.com/WebDevStudios/wd_f/pull/21)
+- WDSUS-33: removes import error [`#28`](https://github.com/WebDevStudios/wd_f/pull/28)
+- Add logo to theme and link to it [`#23`](https://github.com/WebDevStudios/wd_f/pull/23)
+- Enhanced Editor Layout for Improved Frontend and Backend Experience [`#22`](https://github.com/WebDevStudios/wd_f/pull/22)
+- Remove the Customizer [`#19`](https://github.com/WebDevStudios/wd_f/pull/19)
+- Remove Critical CSS [`#18`](https://github.com/WebDevStudios/wd_f/pull/18)
+- Fix #14: Remove CSS styles for columns and navigation link block from theme.json [`#17`](https://github.com/WebDevStudios/wd_f/pull/17)
+- Feature/issue 6 multiple slashes [`#10`](https://github.com/WebDevStudios/wd_f/pull/10)
+- 7 wds acf blocks wp cli replacement issues [`#8`](https://github.com/WebDevStudios/wd_f/pull/8)
+- Hotfix/update readme [`#4`](https://github.com/WebDevStudios/wd_f/pull/4)
+- Update README with instructions for scaffolding blocks [`#2`](https://github.com/WebDevStudios/wd_f/pull/2)
+- Fix issue-1 deprecated warning for block_categories filter [`#3`](https://github.com/WebDevStudios/wd_f/pull/3)
+- Merge pull request #17 from WebDevStudios/fix/#14-css-issues-in-theme-json [`#14`](https://github.com/WebDevStudios/wd_f/issues/14)
+- updated out of date node dependencies [`b96845b`](https://github.com/WebDevStudios/wd_f/commit/b96845ba6995843c63521521662c5c4b5b0a595a)
+- Update lock files [`bc49d03`](https://github.com/WebDevStudios/wd_f/commit/bc49d0368455c31e6abafc0b6e0b4ff4d40c37bc)
+- WDS FSE Initial Commit [`ea3c439`](https://github.com/WebDevStudios/wd_f/commit/ea3c439dedb6b5cd659cc7fbd2829d8aa27a26de)

README.md

@@ -14,7 +14,7 @@ The WebDev FSE Starter Block Theme
 	- [Quick Start](#quick-start)
 - [Setup](#setup)
 	- [Development](#development)
-	- [Building a block with wpcli](#building-a-block-with-wpcli)
+	- [Scaffold a Block](#scaffold-a-block)
 - [Contributing and Support](#contributing-and-support)
 
 ## Introduction
@@ -93,22 +93,18 @@ Command | Action
 `npm run format` | Fix all CSS, JS, MD, and PHP formatting errors automatically
 `npm run report` | Gives detailed information on coding standards violations in PHP code
 
-### Building a block with wpcli
+### Scaffold a Block
 
-In order to build a block, run the following wpcli script.
-
-Note: If you're using Local, you can open the shell from within Local to do this. `Sitename -> Open site shell`.
+In order to scaffold a custom block, run the following script in the root of the theme.
 
 ```bash
-wp wds create_portable_block myblock --title="This is myblock" --desc="This block is used for wds." --keyword="myblock" --icon="table-row-before" --namespace="wds"
+npm run create-block myblock
 ```
 
-This will scaffold out a block inside of the `blocks` folder in the theme. Replace `myblock` with the name of your block and update the other items `title`, `desc`, `keyword`, `icon`, `namespace` with the appropriate information.
-
-Note: If you don't see your new block available under the block listing in the editor after following the above steps, try changing the namespacing in your block's `block.json` to the following format `your-namespace/blockname` and check again.
+This will scaffold out a block inside of the `blocks` folder in the theme. Replace `myblock` with the name of your block and run `npm run build` to build the block.
 
 ## Contributing and Support
 
 Your contributions and [support tickets](https://github.com/WebDevStudios/wd_f/issues) are welcome. Please see our [contributing guidelines](https://github.com/WebDevStudios/wd_f/blob/main/CONTRIBUTING.md) before submitting a pull request.
 
-wd_f is free software, and is released under the terms of the GNU General Public License version 2 or any later version. See [LICENSE.md](https://github.com/WebDevStudios/wd_f/blob/main/LICENSE.md) for complete license.
+`wd_f` is free software, and is released under the terms of the GNU General Public License version 2 or any later version. See [LICENSE.md](https://github.com/WebDevStudios/wd_f/blob/main/LICENSE.md) for complete license.

docs/developers/_index.md

@@ -3,20 +3,14 @@
 ## Custom Functions
 
 <details>
-<summary>Building a block with wpcli</summary>
+<summary>Scaffolding a block</summary>
 
-<p>In order to build a block, run the following wpcli script.</p>
-
-<p>Note: If you're using Local, you can open the shell from within Local to do this.
-<code>Sitename -> Open site shell</code>.</p>
+<p>In order to build a block, run the following script.</p>
 
 <code>
-wp wds create_portable_block myblock --title="This is myblock" --desc="This block
-is used for wds." --keyword="myblock" --icon="table-row-before" --namespace="wds"
+npm run create-block myblock"
 </code>
 
 <p>This will scaffold out a block inside of the <code>blocks</code> folder in the
-theme. Replace <code>myblock</code> with the name of your block and update the
-other items <code>title</code>, <code>desc</code>, <code>keyword</code>, <code>icon</code>,
-<code>namespace</code> with the appropriate information.</p>
+theme. Replace <code>myblock</code> with the name of your block and run <code>npm run build</code> to build the block.</p>
 </details>

functions.php

@@ -22,7 +22,6 @@ function include_inc_files() {
 		'inc/setup/', // Theme setup.
 		'inc/shortcodes/', // Load shortcodes.
 		'inc/template-tags/', // Custom template tags for this theme.
-		'inc/wpcli/', // WPClI to create custom blocks.
 	];
 
 	foreach ( $files as $include ) {

inc/block-template/README.md

@@ -0,0 +1,31 @@
+# WDS Block Template
+
+This template is configured to generate a block that is ready for block registration using the [`@wordpress/create-block`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) tool.
+
+## Usage
+
+Run the following in the terminal of your choice:
+
+`npx @wordpress/create-block@latest --template ../inc/block-template`
+
+
+## Structure
+
+Once the command has completed, the following structure will be created:
+
+``` text
+- src
+--> {example-block}
+---> block.json
+---> edit.js
+---> editor.scss
+---> index.js
+---> save.js
+---> style.scss
+---> view.js
+.editorconfig
+.eslintrc
+.gitignore
+{example-block}.php
+package.json
+```

inc/block-template/block/edit.js.mustache

@@ -0,0 +1,38 @@
+/**
+ * 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 {WPElement} Element to render.
+ */
+export default function Edit() {
+	return (
+		<p { ...useBlockProps() }>
+			{ __( '{{title}} – hello from the editor!', '{{textdomain}}' ) }
+		</p>
+	);
+}

inc/block-template/block/editor.scss.mustache

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+ .wp-block-{{namespace}}-{{slug}} {
+	border: 1px dashed var(--wp--preset--color--black);
+}

inc/block-template/block/index.js.mustache

@@ -0,0 +1,39 @@
+/**
+ * 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,
+} );

inc/block-template/block/save.js.mustache

@@ -0,0 +1,24 @@
+/**
+ * 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 {WPElement} Element to render.
+ */
+export default function save() {
+	return (
+		<p { ...useBlockProps.save() }>
+			{ '{{title}} – hello from the saved content!' }
+		</p>
+	);
+}

inc/block-template/block/style.scss.mustache

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+ .wp-block-{{namespace}}-{{slug}} {
+	background-color: var(--wp--preset--color--tertiary-300);
+	color: var(--wp--preset--color--white);
+	padding: var(--wp--preset--spacing--30);
+}

inc/block-template/block/view.js.mustache

@@ -0,0 +1,25 @@
+/**
+ * Use this file for JavaScript code that you want to run in the front-end
+ * on posts/pages that contain this block.
+ *
+ * When this file is defined as the value of the `viewScript` property
+ * in `block.json` it will be enqueued on the front end of the site.
+ *
+ * Example:
+ *
+ * ```js
+ * {
+ *   "viewScript": "file:./view.js"
+ * }
+ * ```
+ *
+ * If you're not making any changes to this file because your project doesn't need any
+ * JavaScript running in the front-end, then you should delete this file and remove
+ * the `viewScript` property from `block.json`.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
+ */
+
+/* eslint-disable no-console */
+console.log( 'Hello World! (from {{namespaceSnakeCase}}_{{slugSnakeCase}} block)' );
+/* eslint-enable no-console */

inc/block-template/index.js

@@ -0,0 +1,30 @@
+const { join } = require( 'path' );
+
+module.exports = {
+	defaultValues: {
+		description: 'The Block Description',
+		author: 'WebDevStudios',
+		category: 'wds-blocks-category',
+		dashicon: 'pets',
+		namespace: 'wds',
+		folderName: 'src',
+		editorScript: 'file:./index.js',
+		editorStyle: 'file:./index.css',
+		style: 'file:./style-index.css',
+		viewScript: 'file:./view.js',
+		example: {},
+		supports: {
+			html: false,
+		},
+		attributes: {},
+		customScripts: {
+			build: 'wp-scripts build',
+			start: 'wp-scripts start',
+		},
+		devDependencies: {
+			'@wordpress/scripts': '^26.14.0',
+		},
+	},
+	templatesPath: join( __dirname, 'plugin' ),
+	blockTemplatesPath: join( __dirname, 'block' ),
+};

inc/block-template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "wds-block-template",
+  "version": "1.0.0",
+  "description": "A template designed to be used with @wordpress/create-block for enabling custom core blocks.",
+  "author": {
+    "name": "WebDevStudios",
+    "url": "https://webdevstudios.com"
+  },
+  "license": "GPL-2.0-or-later",
+  "keywords": [
+    "wordpress",
+    "create block",
+    "block template",
+    "wds block"
+  ],
+	"homepage": "https://github.com/WebDevStudios/wd_f",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/WebDevStudios/wd_f"
+  },
+  "bugs": {
+    "url": "https://github.com/WebDevStudios/wd_f/issues"
+  }
+}

inc/block-template/plugin/$slug.php.mustache

@@ -0,0 +1,32 @@
+<?php
+/**
+ * Plugin Name:       {{title}}
+{{#description}}
+ * Description:       {{description}}
+{{/description}}
+ * Requires at least: 6.1
+ * Requires PHP:      8.0
+ * Version:           {{version}}
+ * Author:            WebDevStudios
+{{#license}}
+ * License:           {{license}}
+{{/license}}
+{{#licenseURI}}
+ * License URI:       {{{licenseURI}}}
+{{/licenseURI}}
+ * Text Domain:       {{textdomain}}
+ *
+ * @package           {{namespace}}
+ */
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	register_block_type( __DIR__ . '/build' );
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );