Extensions: Add plugins folder. Move Sharing into it. (#20944)

* [not verified] add `plugins` extension folder to compiling system * [not verified] move sharing to plugins folder * [not verified] changelog * [not verified] extensions: update doc * [not verified] Update projects/plugins/jetpack/extensions/README.md Co-authored-by: Paul Bunkham <paul@dobit.co.uk> * [not verified] Update projects/plugins/jetpack/extensions/README.md Co-authored-by: Paul Bunkham <paul@dobit.co.uk> * [not verified] fix jsdoc comment * [not verified] rename helper to presetProductionExtensions * [not verified] simplify presetProductionExtensions(). Props to @anomiex Co-authored-by: Paul Bunkham <paul@dobit.co.uk>
Automattic · Sep 8, 2021 · 8f30c2c · 8f30c2c
1 parent f53343f
commit 8f30c2c
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 23 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-extensions-add-plugins-folder b/projects/plugins/jetpack/changelog/update-extensions-add-plugins-folder
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add `./extensions/plugins` folder to the building system.
diff --git a/projects/plugins/jetpack/extensions/README.md b/projects/plugins/jetpack/extensions/README.md
@@ -7,29 +7,54 @@ also known as Gutenberg, [that was introduced in WordPress 5.0](https://wordpres
 
 We define different types of block editor extensions:
 
-- Blocks are available in the editor itself.
-- Plugins are available in the Jetpack sidebar that appears on the right side of the block editor.
+### Blocks
+Blocks are available in the editor itself.
+Located in the `./blocks` folder.
+
+### Extended blocks
+Blocks, usually core blocks, extended by Jetpack plugin.
+Located in the `./extended-blocks` folder.
+
+### Plugins
+Core Editor [plugins](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/), 
+registered by Jetpack to extend the application UI via [Slot&Fill](https://developer.wordpress.org/block-editor/reference-guides/slotfills/) components.
 
 ## Extension Structure
 
-Extensions in the `extensions/blocks` folder loosely follow this structure:
+Extensions in the `extensions/` folder loosely follow this structure:
 
-```
+```txt
 .
-└── block-or-plugin-name/
-	├── block-or-plugin-name.php ← PHP file where the block and its assets are registered.
-	├── editor.js                ← script loaded only in the editor
-	├── editor.scss              ← styles loaded only in the editor
-	├── view.js                  ← script loaded on the frontend
-	└── view.scss                ← styles loaded on the frontend
+├── blocks/
+│   └── block-name/
+│		├── editor.js                ← script loaded only in the editor
+│		├── editor.scss              ← styles loaded only in the editor
+│		├── view.js                  ← script loaded on the frontend
+│		└── view.scss                ← styles loaded on the frontend
+│
+├── extended-blocks/
+│   └── block-name/
+│		├── index.js                 ← entry point to extend.
+│		└── ...
+│
+├── plugins/
+│   └── plugin-name/
+│		├── index.js                 ← plugin registration
+│		└── ...
+│
+└── store/
+	└── store-name/
+		├── index.js                 ← plugin definition
+		└── ...
 ```
 
 If your block depends on another block, place them all in extensions folder:
 
-```
+```txt
 .
-├── block-name/
-└── sub-blockname/
+└── blocks/
+	├── block-name/
+	└── sub-blockname/
 ```
 
 ## Developing block editor extensions in Jetpack
@@ -38,7 +63,7 @@ If your block depends on another block, place them all in extensions folder:
 
 1. Use the [Jetpack Docker environment](https://github.com/Automattic/jetpack/tree/master/docker#readme).
 1. Start a new branch.
-1. Add your new extension's source files to the extensions/blocks directory.
+1. Add your new extension's source files to the extensions directory.
 And add your extensions' slug to the beta array in `extensions/index.json`. You can use Jetpack-CLI command to scaffold the block (see below).
 By keeping your extension in the beta array, it's safe to do small PRs and merge frequently.
 1. Or modify existing extensions in the same folder.
@@ -218,7 +243,6 @@ An example of this pattern is provided below:
 ```jsx
 const extensionName = 'my-extension-name';
 
-
 /*
  * Register the main "social-previews" extension if the feature is available
  * on the current plan.

diff --git a/...tpack/extensions/blocks/sharing/editor.js → ...pack/extensions/plugins/sharing/editor.js b/...tpack/extensions/blocks/sharing/editor.js → ...pack/extensions/plugins/sharing/editor.js
diff --git a/...etpack/extensions/blocks/sharing/index.js → ...tpack/extensions/plugins/sharing/index.js b/...etpack/extensions/blocks/sharing/index.js → ...tpack/extensions/plugins/sharing/index.js
diff --git a/...nsions/blocks/sharing/sharing-checkbox.js → ...sions/plugins/sharing/sharing-checkbox.js b/...nsions/blocks/sharing/sharing-checkbox.js → ...sions/plugins/sharing/sharing-checkbox.js
diff --git a/projects/plugins/jetpack/tools/webpack.config.extensions.js b/projects/plugins/jetpack/tools/webpack.config.extensions.js
@@ -26,18 +26,21 @@ const CopyBlockEditorAssetsPlugin = require( './copy-block-editor-assets' );
  */
 const editorSetup = path.join( path.dirname( __dirname ), 'extensions', 'editor' );
 const viewSetup = path.join( path.dirname( __dirname ), 'extensions', 'view' );
+const blockEditorDirectories = [ 'blocks', 'plugins' ];
 
 /**
- * Filters block scripts
+ * Filters block editor scripts
  *
  * @param {string} type - script type
  * @param {string} inputDir - input directory
  * @param {Array} presetBlocks - preset blocks
  * @returns {Array} list of block scripts
  */
-function blockScripts( type, inputDir, presetBlocks ) {
-	return presetBlocks
-		.map( block => path.join( inputDir, 'blocks', block, `${ type }.js` ) )
+function presetProductionExtensions( type, inputDir, presetBlocks ) {
+	return blockEditorDirectories
+		.flatMap( dir =>
+			presetBlocks.map( block => path.join( inputDir, dir, block, `${ type }.js` ) )
+		)
 		.filter( fs.existsSync );
 }
 
@@ -71,7 +74,7 @@ const viewBlocksScripts = presetBetaBlocks.reduce( ( viewBlocks, block ) => {
 // Combines all the different production blocks into one editor.js script
 const editorScript = [
 	editorSetup,
-	...blockScripts(
+	...presetProductionExtensions(
 		'editor',
 		path.join( path.dirname( __dirname ), 'extensions' ),
 		presetProductionBlocks
@@ -81,7 +84,7 @@ const editorScript = [
 // Combines all the different Experimental blocks into one editor.js script
 const editorExperimentalScript = [
 	editorSetup,
-	...blockScripts(
+	...presetProductionExtensions(
 		'editor',
 		path.join( path.dirname( __dirname ), 'extensions' ),
 		presetExperimentalBlocks
@@ -91,7 +94,7 @@ const editorExperimentalScript = [
 // Combines all the different blocks into one editor-beta.js script
 const editorBetaScript = [
 	editorSetup,
-	...blockScripts(
+	...presetProductionExtensions(
 		'editor',
 		path.join( path.dirname( __dirname ), 'extensions' ),
 		presetBetaBlocks
@@ -100,7 +103,7 @@ const editorBetaScript = [
 
 const editorNoPostEditorScript = [
 	editorSetup,
-	...blockScripts(
+	...presetProductionExtensions(
 		'editor',
 		path.join( path.dirname( __dirname ), 'extensions' ),
 		presetNoPostEditorBlocks