Merge branch 'develop' into fix/only-register-store-if-not-already-pr…

…esent
10up · Aug 28, 2023 · 2998b40 · 2998b40
2 parents a3c7dbe + d3e0757
commit 2998b40
Show file tree

Hide file tree

Showing 42 changed files with 784 additions and 548 deletions.
diff --git a/.github/workflows/release-npm-version.yml b/.github/workflows/release-npm-version.yml
@@ -0,0 +1,53 @@
+name: Publish new version to NPM
+on:
+  workflow_dispatch:
+    inputs:
+      release_type:
+        description: 'Release Type'
+        required: true
+        default: 'patch'
+        type: choice
+        options:
+        - patch
+        - minor
+        - major
+      dry_run:
+        description: 'Dry Run'
+        required: true
+        default: 'false'
+        type: choice
+        options:
+        - true
+        - false
+concurrency: 
+  group: ${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+jobs:
+  build_and_release:
+    environment: production
+    if: github.ref == 'refs/heads/trunk'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Configure git user name and email
+        run: |
+            git config user.name "10up Bot"
+            git config user.email "[email protected]"
+
+      - name: Install all npm packages
+        run: npm ci
+
+      - name: npm update version and release
+        run: |
+          npm version ${{ github.event.inputs.release_type }} --git-tag-version=${{ github.event.inputs.dry_run == 'false' }}
+          npm publish --dry-run=${{ github.event.inputs.dry_run }}
+        env:
+           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: push release commit to repo
+        run: git push
diff --git a/.github/workflows/release-testing-npm-version.yml b/.github/workflows/release-testing-npm-version.yml
@@ -0,0 +1,54 @@
+name: Publish new testing version to NPM
+on: [pull_request]
+concurrency: 
+  group: ${{ github.head_ref || github.run_id }}
+  cancel-in-progress: true
+jobs:
+  build_and_release:
+    environment: testing
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: npm list
+
+      - name: Configure git user name and email
+        run: |
+            git config user.name "10up Bot"
+            git config user.email "[email protected]"
+
+      - name: Install all npm packages
+        run: npm install
+
+      - name: npm update version and release
+        run: |
+          npm version prerelease --preid=testing-${{ github.event.number}}.${{ github.run_number}}
+          npm publish --tag testing-${{ github.event.number}}
+        env:
+           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - uses: mshick/add-pr-comment@v2
+        with:
+         message: |
+           :tada: A new testing version of this package has been published to NPM. You can install it with `npm install @10up/block-components@testing-${{ github.event.number}}`
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -27,15 +27,48 @@ For more on how 10up writes and manages code, check out our [10up Engineering Be
 The `develop` branch is the development branch which means it contains the next version to be released. `stable` contains the current latest release and `trunk` contains the corresponding stable development version. Always work on the `develop` branch and open up PRs against `develop`.
 
 ## Local Environment
+
 This repository contains a local environment setup using the `@wordpress/env` package. Before you can start that environment you will need to run `npm ci` in both the repository root and `example` directory. This will install the required dependencies.
 
 Next, run `npm run build` in both the root and `example` directories to build and compile the needed assets or if you want to watch for changes instead, use `npm run start`.
 
 Lastly, navigate your terminal to the `example` directory and run `npm run wp-env start` to start the local environment. The environment should be available at [http://localhost:8888](http://localhost:8888) and the credentials to login to the admin are: `admin` `password`.
 
 ## Working on a new or existing component
+
 To work on a new or an existing component, after running your Local Environment, you can import the component you need from `@10up/block-components`. You can see how this is currently done in the [/example/src/index.js](https://github.com/10up/block-components/blob/trunk/example/src/index.js#L6) file. If you work on a new component inside the `/components/` folder, make sure to expose it's export in the [index.js](https://github.com/10up/block-components/blob/trunk/index.js) file.
 
 The components in the repository do not store data using useAttributes. This is done in the Gutenberg blocks that include the Block Components of this repository. That isn't to say that the block components are not working with data. An example of that is the [ContentSearch](https://github.com/10up/block-components/blob/develop/components/ContentSearch/index.js) component. When you test out a component in the `example/index.js` file, you ideally want to also store the [block attributes](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) there.
 
-After you are ready with your changes, make sure to only commit and push the work from the **components folder**, not the example folder, unless, of course, the ticket is for the example folder.
+After you are ready with your changes, make sure to only commit and push the work from the **components folder**, not the example folder, unless, of course, the ticket is for the example folder.
+
+## Release instructions
+
+Releases can get managed entirely via the UI in GitHub. There are various actions in place to make this as seamless as possible.
+
+### Deploying a `@testing` version of a specific PR
+
+Whenever a PR gets created / new changes are pushed to a PR, a GitHub Action runs that will try to deploy a prerelease version tagged with the pr number to NPM.
+
+> **Note**
+> This action only runs when it gets approved by a maintainer of the 10up Block Components repository.
+
+### Deploying a `@next` version
+
+Whenever a PR gets merged into the `develop` branch, a GitHub Action runs that will automatically release a new `@next` version of the package.
+
+### Deploying `patch`, `minor`, or `major` versions
+
+Whenever a new `patch`, `minor`, or `major` version of the package should get released, the code first needs to get merged into the `trunk` branch. Once the code is on the `trunk` brach you need to head to the `Actions` tab in the repository and select the [`Publish new version to NPM`](https://github.com/10up/block-components/actions/workflows/release-npm-version.yml) Action in the sidebar.
+
+![GitHub Actions Window](./images/release-action-page.png)
+
+This Action can be manually triggered and allows you to choose what type of release you want to start.
+
+![Release Action Trigger](./images/release-action-trigger.png)
+
+> **Warning**
+> This action will only successfully run when `trunk` gets selected as the Branch. For any other branch it will skip all steps.
+
+> **Note**
+> This action only runs when it gets approved by a maintainer of the 10up Block Components repository.
diff --git a/example/package.json b/example/package.json
@@ -7,7 +7,7 @@
         "build": "wp-scripts build",
         "start": "wp-scripts start",
         "wp-env": "wp-env",
-		"start-env": "wp-env start",
+        "start-env": "wp-env start",
         "import-media": "wp-env run tests-cli wp media import /var/www/html/wp-content/plugins/example/images/1920-1080.png"
     },
     "keywords": [],
@@ -16,7 +16,7 @@
     "devDependencies": {
         "@wordpress/env": "^5.8.0",
         "@wordpress/eslint-plugin": "^13.7.0",
-        "@wordpress/scripts": "^25.0.0"
+        "@wordpress/scripts": "^25.5.1"
     },
     "dependencies": {
         "@10up/block-components": "file:../dist/index.js",

diff --git a/example/plugin.php b/example/plugin.php
@@ -14,66 +14,56 @@
 
 namespace HelloWorld;
 
+// Useful global constants.
+define( 'EXAMPLE_PLUGIN_TEMPLATE_URL', plugin_dir_url( __FILE__ ) );
+define( 'EXAMPLE_PLUGIN_PATH', plugin_dir_path( __FILE__ ) );
+define( 'EXAMPLE_PLUGIN_DIST_PATH', EXAMPLE_PLUGIN_PATH . 'build/' );
+define( 'EXAMPLE_PLUGIN_DIST_URL', EXAMPLE_PLUGIN_TEMPLATE_URL . '/build/' );
+define( 'EXAMPLE_PLUGIN_INC', EXAMPLE_PLUGIN_PATH . 'includes/' );
+define( 'EXAMPLE_PLUGIN_BLOCK_DIR', EXAMPLE_PLUGIN_INC . 'blocks/' );
+define( 'EXAMPLE_PLUGIN_BLOCK_DIST_DIR', EXAMPLE_PLUGIN_PATH . 'build/blocks/' );
+
 add_action( 'init', __NAMESPACE__ . '\register_block' );
 /**
  * Register the block
  */
 function register_block() {
 
-	$dir               = dirname( __FILE__ );
-	$script_asset_path = "$dir/build/index.asset.php";
-	$index_js          = 'build/index.js';
-	$script_asset      = require $script_asset_path;
-	wp_register_script(
-		'editor-script',
-		plugins_url( $index_js, __FILE__ ),
-		$script_asset['dependencies'],
-		$script_asset['version'],
-		false
-	);
+	if ( file_exists( EXAMPLE_PLUGIN_BLOCK_DIST_DIR ) ) {
+		$block_json_files = glob( EXAMPLE_PLUGIN_BLOCK_DIST_DIR . '*/block.json' );
+		foreach ( $block_json_files as $filename ) {
+			$block_folder = dirname( $filename );
+			register_block_type( $block_folder );
+		};
+	};
+};
 
-	register_block_type(
-		'example/hello-world',
-		[
-			'editor_script' => 'editor-script',
-		]
-	);
+add_action( 'enqueue_block_assets', __NAMESPACE__ . '\enqueue_block_editor_scripts' );
 
-	register_block_type(
-		__DIR__ . '/src/blocks/link-example',
-		[
-			'editor_script'   => 'editor-script',
-			'render_callback' => function( $attributes, $content, $block ) {
-				$title = $attributes['title'];
-
-				$link_one_url   = isset( $attributes['url'] ) ? $attributes['url'] : '';
-				$link_one_label = isset( $attributes['text'] ) ? $attributes['text'] : '';
-
-				$link_two_url   = isset( $attributes['urlTwo'] ) ? $attributes['urlTwo'] : '';
-				$link_two_label = isset( $attributes['textTwo'] ) ? $attributes['textTwo'] : '';
-
-				$wrapper_attributes = get_block_wrapper_attributes();
-
-				ob_start();
-				?>
-				<div <?php echo wp_kses_post( $wrapper_attributes ); ?>>
-					<h2><?php echo wp_kses_post( $title ); ?></h2>
-					<a href="<?php echo esc_url( $link_one_url ); ?>"><?php echo wp_kses_post( $link_one_label ); ?></a>
-					<a href="<?php echo esc_url( $link_two_url ); ?>"><?php echo wp_kses_post( $link_two_label ); ?></a>
-				</div>
-				<?php
-				return ob_get_clean();
-			},
-		]
+/**
+ * Enqueue Block Editor Scripts
+ */
+function enqueue_block_editor_scripts() {
+	$asset_file = include EXAMPLE_PLUGIN_DIST_PATH . 'index.asset.php';
+
+	wp_enqueue_script(
+		'example-block-editor-script',
+		EXAMPLE_PLUGIN_DIST_URL . 'index.js',
+		$asset_file['dependencies'],
+		$asset_file['version'],
+		true
 	);
-};
+}
 
+/**
+ * Register Book Custom Post Type
+ */
 function register_book_custom_post_type() {
 	$labels = array(
-		'name'               => __( 'Books', 'tenup' ),
-		'singular_name'      => __( 'Book', 'tenup' ),
-		'menu_name'          => __( 'Books', 'tenup' ),
-		'view_item'          => __( 'View book', 'tenup' ),
+		'name'          => __( 'Books', 'tenup' ),
+		'singular_name' => __( 'Book', 'tenup' ),
+		'menu_name'     => __( 'Books', 'tenup' ),
+		'view_item'     => __( 'View book', 'tenup' ),
 	);
 
 	$args = [
@@ -96,32 +86,48 @@ function register_book_custom_post_type() {
 		'capability_type'     => 'post',
 		'show_in_rest'        => true,
 	];
-	
+
 	register_post_type( 'books', $args );
 
-	register_post_meta( 'books', 'author', [
-		'type'         => 'string',
-		'single'       => true,
-		'show_in_rest' => true,
-	] );
-
-	register_post_meta( 'books', 'isbn', [
-		'type'         => 'string',
-		'single'       => true,
-		'show_in_rest' => true,
-	] );
-
-	register_post_meta( 'books', 'price', [
-		'type'         => 'number',
-		'single'       => true,
-		'show_in_rest' => true,
-	] );
-
-	register_post_meta( 'books', 'is_featured', [
-		'type'         => 'boolean',
-		'single'       => true,
-		'show_in_rest' => true,
-	] );
+	register_post_meta(
+		'books',
+		'author',
+		[
+			'type'         => 'string',
+			'single'       => true,
+			'show_in_rest' => true,
+		]
+	);
+
+	register_post_meta(
+		'books',
+		'isbn',
+		[
+			'type'         => 'string',
+			'single'       => true,
+			'show_in_rest' => true,
+		]
+	);
+
+	register_post_meta(
+		'books',
+		'price',
+		[
+			'type'         => 'number',
+			'single'       => true,
+			'show_in_rest' => true,
+		]
+	);
+
+	register_post_meta(
+		'books',
+		'is_featured',
+		[
+			'type'         => 'boolean',
+			'single'       => true,
+			'show_in_rest' => true,
+		]
+	);
 }
 
 add_action( 'init', __NAMESPACE__ . '\register_book_custom_post_type' );

diff --git a/example/src/blocks/content-item/block.json b/example/src/blocks/content-item/block.json
@@ -0,0 +1,16 @@
+{
+	"apiVersion": 2,
+	"name": "example/content-item",
+	"title": "Content Item",
+	"icon": "smiley",
+	"category": "common",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"attributes": {},
+	"variations": [],
+	"usesContext": ["postId", "postType", "queryId"],
+	"ancestor": ["core/post-template"],
+	"editorScript": "file:./index.js"
+}