Merge branch 'trunk' into feature/debug-plugins

# Conflicts:
#	composer.lock

.editorconfig

@@ -11,5 +11,5 @@ indent_style = tab
 indent_style = space
 indent_size = 2
 
-[*.txt,wp-config-sample.php]
+[{*.txt,wp-config-sample.php}]
 end_of_line = crlf

.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": ["@10up/eslint-config/wordpress"]
+}

.gitignore

@@ -22,7 +22,8 @@ tmtags
 *.un~
 Session.vim
 *.swp
-.vscode
+.vscode/launch.json
+tasks.json
 
 # Mac OSX
 .DS_Store
@@ -33,3 +34,4 @@ Session.vim
 # Windows
 Thumbs.db
 Desktop.ini
+/debug.log

.nvmrc

@@ -1 +1 @@
-12
+18

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.format.enable": true,
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
+}

README.md

@@ -4,25 +4,36 @@ This scaffold is the starting point for all 10up WordPress projects.
 
 It contains a bare bones theme and must use plugin for you to base your development off of. Asset bundling is handled entirely by [10up Toolkit](https://github.com/10up/10up-toolkit).
 
+## Requirements
+
+- Node >= 16
+- NPM >= 7
+
 ## How to Use
 
 1. [Download a zip](https://github.com/10up/wp-scaffold/archive/trunk.zip) of the repository into your project. At 10up, by default we version control the `wp-content` directory (ignoring obvious things like `uploads`). This enables us to have plugins, theme, etc. all in one repository. Having separate repositories for each plugin and theme only happens in rare circumstances that are outside of our control.
 2. Take what you need. If your project doesn't have a theme, remove the theme. If your project doesn't need any plugin functionality, remove the MU plugin. If your plugin doesn't need CSS/JS, remove it. If your plugin doesn't need to be translated, remove all the translation functionality.
-3. Compiling, minifying, bundling, etc. of JavaScript and CSS is all done by [10up Toolkit](https://github.com/10up/10up-toolkit). 10up Toolkit is included as a dev dependency in both the plugin and theme. If you want to develop on the theme (and vice-versa the plugin), you would navigate to the theme directory in your console and run `npm run start` (after running `npm install` first of course). Inside `package.json` edit `@10up/scripts.devURL` to your local development URL for BrowserSync to work properly. `@10up/scripts.entry` are the paths to CSS/JS files that need to be bundled. Edit these as needed.
-4. [lerna](https://github.com/lerna/lerna) is used to manage npm dependencies. The main benefit of using lerna is that we can hoist all dependencies to the root folder and avoid installing duplicate dependencies, saving time and space. By default `lerna` is aware of all themes and `mu-plugins/10up-plugin`, if you are building a new plugin/theme make sure that `lerna` is aware of it by adding it to the `lerna.json` file. See the example below:
+3. Compiling, minifying, bundling, etc. of JavaScript and CSS is all done by [10up Toolkit](https://github.com/10up/10up-toolkit). 10up Toolkit is included as a dev dependency in both the plugin and theme. If you want to develop on the theme (and vice-versa the plugin), you would navigate to the theme directory in your console and run `npm run start` (after running `npm install` first of course). Inside `package.json` edit `10up-toolkit.devURL` to your local development URL for if you're not using a `.test`. `10up-toolkit.entry` are the paths to CSS/JS files that need to be bundled. Edit these as needed.
+4. Make sure to add `define( 'SCRIPT_DEBUG', true )` to `wp-config.php` to enable Hot Module Reload and React Fast Refresh.
+5. [npm workspaces](https://docs.npmjs.com/cli/v7/using-npm/workspaces) is used to manage npm dependencies. The main benefit of using npm workspaces is that we can hoist all dependencies to the root folder and avoid installing duplicate dependencies, saving time and space. By default the `workspaces` config are setup so that `mu-plugins/10up-plugin` and all themes are treated as "packages", if you are building a new plugin/theme make sure to update `workspaces` in `package.json` See the example below:
 
 ```json
-{
-  "packages": [
-    "themes/*",
-    "mu-plugins/10up-plugin",
-	"plugin/my-other-plugin",
+  "workspaces": [
+		"themes/*",
+		"mu-plugins/10up-plugin",
+		"mu-plugins/my-other-awesome-10up-plugin",
   ],
-  "version": "independent"
-}
 ```
-5. To build plugins/themes simply run `npm install` at the root and `npm run [build|start|watch]` and lerna will automatically build all themes and plugins.
-6. In the unlikely scenario that you're having a problem with hoisted deps where [packages can't be found](https://github.com/lerna/lerna/blob/main/doc/hoist.md#module-resolution) we encourage you to fix the issue (or look for an alternative library/package). In the worst case scenario you can disable hoisting by removing the `--hoist` flag in the `prepare` script in `package.json`.
+6. To build plugins/themes simply run `npm install` at the root and `npm run [build|start|watch]` and npm will automatically build all themes and plugins. If a WordPress critical error is received run `composer install` in all locations that have an existing `composer.lock` file; example locations: `root`, `/mu-plugins/10up-plugin`, `/themes/10up-theme`. Upon build completion set the `10up-theme` as active within WordPress admin by running `wp theme activate 10up-theme`.
+7. `npm workspaces` do not have the ability to run scripts from multiple packages in parrallel. Because of that we use the `npm-run-all` package and we define specific scripts in `package.json` so you will need to update the `watch:*` scripts in `package.json` and replace `tenup-theme` and `tenup-plugin` with the actual package names.
+
+```json
+	"watch:theme": "npm run watch -w=tenup-theme",
+	"watch:plugin": "npm run watch -w=tenup-plugin",
+	"watch": "run-s watch:theme watch:plugin",
+```
+7. To add npm dependencies to your theme and/or plugins add the `-w=package-name` flag to the `npm install` command. E.g: `npm install --save prop-types -w=tenup-plugin` **DO NOT RUN** `npm install` inside an individual workspace/package. Always run the from the root folder.
+8. If you're building Gutenberg blocks and importing `@wordpress/*` packages, **you do not** need to manually install them as `10up-toolkit` will handle these packages properly.
 
 ## Scaffold Rules
 
@@ -34,8 +45,8 @@ Much of the functionality in the scaffold is intended to be optional depending o
 5. When creating new themes or plugins make sure to  follow the `scripts` convention:
 ```json
   "scripts": {
-    "start": "10up-toolkit start",
-    "watch": "10up-toolkit watch",
+    "start": "npm run watch",
+    "watch": "10up-toolkit watch --hot",
     "build": "10up-toolkit build",
     "format-js": "10up-toolkit format-js",
     "lint-js": "10up-toolkit lint-js",

bin/create-block-template/block-templates/edit.js.mustache

@@ -0,0 +1,21 @@
+{{#isDefaultVariant}}
+import { useBlockProps } from '@wordpress/block-editor';
+{{/isDefaultVariant}}
+{{#isInnerBlocksVariant}}
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+{{/isInnerBlocksVariant}}
+
+export const BlockEdit = (props) => {
+	const { attributes, setAttributes } = props;
+	const blockProps = useBlockProps();
+	{{#isInnerBlocksVariant}}
+	const innerBlocksProps = useInnerBlocksProps({}, {});
+	{{/isInnerBlocksVariant}}
+	return (
+		<div {...blockProps}>
+			{{#isInnerBlocksVariant}}
+			<ul {...innerBlocksProps} />
+			{{/isInnerBlocksVariant}}
+		</div>
+	);
+};

bin/create-block-template/block-templates/index.js.mustache

@@ -0,0 +1,17 @@
+import { registerBlockType } from '@wordpress/blocks';
+{{#isInnerBlocksVariant}}
+import { InnerBlocks } from '@wordpress/block-editor';
+{{/isInnerBlocksVariant}}
+
+import { BlockEdit } from './edit';
+import metadata from './block.json';
+
+registerBlockType(metadata, {
+	edit: BlockEdit,
+	{{#isDefaultVariant}}
+	save: () => null,
+	{{/isDefaultVariant}}
+	{{#isInnerBlocksVariant}}
+	save: () => <InnerBlocks.Content />,
+	{{/isInnerBlocksVariant}}
+});

bin/create-block-template/block-templates/markup.php.mustache

@@ -0,0 +1,33 @@
+<?php
+/**
+ * {{namespace}} markup
+ *
+ * @package tenup\Blocks\{{namespaceSnakeCase}}
+ *
+ * @var array    $attributes         Block attributes.
+ * @var string   $content            Block content.
+ * @var WP_Block $block              Block instance.
+ */
+
+?>
+
+<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+{{#isInnerBlocksVariant}}
+	<ul>
+		<?php
+		/*
+		 * the block_content is the html generated from innerBlocks
+		 * it is being created from the save method in JS or the render_callback
+		 * in php and is sanitized.
+		 *
+		 * Re sanitizing it through `wp_kses_post` causes
+		 * embed blocks to break and other core filters don't apply.
+		 * therefore no additional sanitization is done and it is being output as is
+		 *
+		 * @see https://github.com/10up/gutenberg-best-practices/discussions/6
+		 */
+		echo $content; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		?>
+	</ul>
+{{/isInnerBlocksVariant}}
+</div>

bin/create-block-template/block-templates/style.css.mustache

@@ -0,0 +1,10 @@
+/**
+ * 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}} {
+	
+}

bin/create-block-template/block-templates/view.js.mustache

@@ -0,0 +1,14 @@
+{{#isWithViewScriptVariant}}
+/**
+ * setup an instance of the block
+ *
+ * @param {HTMLElement} element DOM Node of the block
+ * @returns {void}
+ */
+function setup{{slugPascalCase}}Block(element) {
+	
+}
+
+const all{{slugPascalCase}}Blocks = document.querySelectorAll('.wp-block-{{namespace}}-{{slug}}');
+all{{slugPascalCase}}Blocks.forEach(setup{{slugPascalCase}}Block);
+{{/isWithViewScriptVariant}}

bin/create-block-template/index.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+const { join } = require('path');
+
+module.exports = {
+	defaultValues: {
+		slug: 'example-block',
+		category: 'text',
+		title: 'Example Block',
+		description: 'Example Block',
+		attributes: {},
+		supports: {
+			html: false,
+		},
+		customBlockJSON: {
+			textdomain: 'tenup',
+		},
+		namespace: 'tenup',
+		wpScripts: false,
+		wpEnv: false,
+		version: false,
+		folderName: './src/blocks/example-block',
+		render: 'file:./markup.php',
+		editorStyle: false,
+		style: 'file:./style.css',
+	},
+	variants: {
+		default: {},
+		innerBlocks: {},
+		withViewScript: {
+			viewScript: 'file:./view.js',
+		},
+	},
+	blockTemplatesPath: join(__dirname, 'block-templates'),
+};