Skip to content

Commit

Permalink
Merge branch 'trunk' into 45215-fix-selected-footer
Browse files Browse the repository at this point in the history
  • Loading branch information
albarin committed Mar 5, 2024
2 parents a8ebbe8 + 298cddf commit dd607cf
Show file tree
Hide file tree
Showing 80 changed files with 1,320 additions and 702 deletions.
Expand Up @@ -81,7 +81,5 @@ jobs:
<${{ github.event.pull_request.html_url }}|${{ github.event.pull_request.title }}>
*Labels:* ${{ join(github.event.pull_request.labels.*.name, ', ') }}
*Monthly Release Milestone:* <${{ github.event.pull_request.milestone.html_url }}|${{ github.event.pull_request.milestone.title }}> (Release Date: ${{ env.MILESTONE_DATE }})
*WooAF (weekly) Timeline: this PR can be tested from:* ${{ env.TEST_DATE_MESSAGE }}
Please visit the <#${{ secrets.WOO_CORE_RELEASES_SLACK_CHANNEL }}> to obtain the latest WooAF build for testing.
slack-optional-unfurl_links: false
slack-optional-unfurl_media: false
2 changes: 1 addition & 1 deletion README.md
Expand Up @@ -4,7 +4,7 @@

Welcome to the WooCommerce Monorepo on GitHub. Here you can find all of the plugins, packages, and tools used in the development of the core WooCommerce plugin as well as WooCommerce extensions. You can browse the source, look at open issues, contribute code, and keep tracking of ongoing development.

We recommend all developers to follow the [WooCommerce development blog](https://woocommerce.wordpress.com/) to stay up to date about everything happening in the project. You can also [follow @DevelopWC](https://twitter.com/DevelopWC) on Twitter for the latest development updates.
We recommend all developers to follow the [WooCommerce development blog](https://developer.woo.com/blog/) to stay up to date about everything happening in the project. You can also [follow @DevelopWC](https://twitter.com/DevelopWC) on Twitter for the latest development updates.

## Getting Started

Expand Down
4 changes: 2 additions & 2 deletions docs/docs-manifest.json
Expand Up @@ -458,7 +458,7 @@
"menu_title": "Build your first extension",
"tags": "how-to",
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/extension-development/building-your-first-extension.md",
"hash": "0b72a7c7a844459c971f10ade3f56e5c172d6f4fe5902f733972aaf7fc2121cb",
"hash": "6b3af5e8e96294df9625e843654adddcf97b26c81ec43b47c41be2b2ad835783",
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/extension-development/building-your-first-extension.md",
"id": "278c2822fe06f1ab72499a757ef0c4981cfbffb5"
},
Expand Down Expand Up @@ -1204,5 +1204,5 @@
"categories": []
}
],
"hash": "2453d3ac64b6f1f4f4cd8efddfc166602f7182a9dff17218070fd2dccf8722e5"
"hash": "919aaa18bc145996f6a7dc0259f810f29363cc12721bac513d0d4234b30c50a7"
}
136 changes: 51 additions & 85 deletions docs/extension-development/building-your-first-extension.md
Expand Up @@ -3,118 +3,84 @@ post_title: How to build your first extension
menu_title: Build your first extension
tags: how-to
---
## Introduction

The easiest way to get started building an extension is to use the built-in extension generator that is included alongside WooCommerce Admin. This utility is maintained as part of the codebase for WooCommerce Admin, so it includes up-to-date tools and many preconfigured settings for building modern extensions that take advantage of the [React-powered](https://react.dev/) user experience available in current versions of WordPress and WooCommerce.
This guide will teach you how to use [create-woo-extension](https://www.npmjs.com/package/@woocommerce/create-woo-extension) to scaffold a WooCommerce extension. There are various benefits to using create-woo-extension over manually creating one from scratch, including:

## Using the extension generator
There’s less boilerplate code to write, and less dependencies to manually setup
Modern features such as Blocks are automatically supported
Unit testing, linting, and Prettier IDE configuration are ready to use

Browse to your local WooCommerce Admin repository
Once your extension is set up, we’ll show you how to instantly spin up a development environment using [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/).

```sh
cd /your/server/wp-content/plugins/woocommerce-admin
```
## Requirements

Run the extension generator command
Before getting started, you’ll need the following tools installed on your device:

```sh
npm run create-wc-extension
```

The extension generator will scaffold out a basic extension and place it in its own plugin directory alongside WooCommerce on your local server.
- [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs) with NPM
- [Docker](https://docs.docker.com/engine/install/) (must be running to use wp-env)
- [Composer](https://getcomposer.org/doc/00-intro.md)

The extension that the generator creates contains a simple [boilerplate](https://stackoverflow.com/questions/3992199/what-is-boilerplate-code) that handles much of the configuration needed for setting up a React-powered extension, which you can modify to fit your needs.
This guide also presumes you’re familiar with working with the command line.

## The architecture of a basic WooCommerce extension
## Bootstrapping Your Extension

WooCommerce extensions use a combination of PHP and modern JavaScript to create a seamless user experience for merchants and shoppers that takes advantage of the features and functionality available in the [NodeJS](https://nodejs.org/en) ecosystem while still being a good neighbor within the underlying WordPress application environment.
Open your terminal and run

WordPress plugins (of which WooCommerce extensions are a specialized subset), tend to follow a few common patterns. You can read more about common WordPress plugin architecture in the [Best Practices chapter of the WordPress Plugin Developer Handbook](https://developer.wordpress.org/plugins/plugin-basics/best-practices/#architecture-patterns).
```sh
npx @wordpress/create-block -t
@woocommerce/create-woo-extension my-extension-name
```

In addition to the main PHP file that all WordPress plugins must contain, a WooCommerce extension will typically contain additional PHP files with classes that assist in server-side functionality.
If you’d like to set a custom extension name, you can replace `my-extension-name` with any slug. Please note that your slug must not have any spaces.

It will also contain files that are JavaScript and CSS assets which shape the client-side behavior and appearance.
If you see a prompt similar to Need to install the following packages: `@wordpress/create-block@4.34.0. Ok to proceed?`, press `Y`.

## File structure generated by the `create-wc-extension script`

When you run the built-in extension generator, it will output something that looks similar to the structure below.
Once the package finishes generating your extension, navigate into the extension’s folder using

```sh
- README.md
- my-great-extension.php
- package.json
- src
- index.js
- index.scss
- webpack.config.js
cd my-extension-name
```

Here's a breakdown of what these files are and what purpose they serve:

`README.md`
This file is meant to have a high-level overview of your extension to make it easier for people to use and extend your project. The generator outputs a basic file with some minimal instructions in it to get you started, but you should replace the contents of the file with information specific to your project. It's important to keep in mind that this file is not the same as the readme.txt file required by WordPress.org plugin directory, which must adhere to specific file standads.

`[your-extension-name].php`
This is your extension's main PHP file. It functions as the entry point for your extension and is where you'll likely include code that hooks your extension into WordPress and WooCommerce. You can read more about the purpose of this file in the Getting Started section of the WordPress Plugin Developer Handbook.

`package.json`
This is a manifest file that Node uses for a number of different purposes. It can store configuration settings for tools, lists of dependencies, aliases for common scripts, and even metadata about your extension. The WooCommerce extension generator outputs a package.json file that will bundle many helpful dependencies with your extension, as well as a variety of scripts you can use in conjunction with these dependencies to streamline your workflow and make sure your extension conforms to the same standards as other WordPress plugins and WooCommerce extensions. Here's an example of what your package.json file might look like initially:

```json
{
"name": "my-great-extension",
"title": "my-great-extension",
"license": "GPL-3.0-or-later",
"version": "0.1.0",
"description": "my-great-extension",
"scripts": {
"build": "wp-scripts build",
"check-engines": "wp-scripts check-engines",
"check-licenses": "wp-scripts check-licenses",
"format:js": "wp-scripts format-js",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"lint:md:docs": "wp-scripts lint-md-docs",
"lint:md:js": "wp-scripts lint-md-js",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"packages-update": "wp-scripts packages-update",
"start": "wp-scripts start",
"test:e2e": "wp-scripts test-e2e",
"test:unit": "wp-scripts test-unit-js"
},
"devDependencies": {
"@wordpress/scripts": "^12.2.1",
"@woocommerce/eslint-plugin": "1.1.0",
"@woocommerce/dependency-extraction-webpack-plugin": "1.1.0"
}
}
```
You should then install your extension’s dependencies using `npm install` and build it using `npm run build`.

The settings in this autogenerated file tell Webpack to use the default configuration included with the `@wordpress/scripts` package (listed in your `package.json` as a development dependency) and to override the plugin it uses for dependency extraction with one that is tailor-made for WooCommerce extensions.
Congratulations! You just spun up a WooCommerce extension! Your extension will have the following file structure:

## Try out your extension
- `my-extension-name`
- `block.json` - contains metadata used to register your custom blocks with WordPress. Learn more.
- `build` - the built version of your extension which is generated using npm run build. You shouldn’t directly modify any of the files in this folder.
- `composer.json` - contains a list of your PHP dependencies which is referenced by Composer.
- `composer.lock` - this file allows you to control when and how to update these dependencies
- `includes` - The primary purpose of an "includes" folder in PHP development is to store reusable code or files that need to be included or required in multiple parts of a project. This is a PHP developer convention.
- `languages` - contains POT files that are used to localize your plugin.
- `my-extension-name.php` - your plugin’s entry point that registers your plugin with WordPress.
- `node-modules` - help you form the building blocks of your application and write more structured code
- `package.json` - is considered the heart of a Node project. It records metadata, and installs functional dependencies, runs scripts, and defines the entry point of your application.
- `README.md` - An introduction and instructional overview of your application. Any special instructions, updates from the author, and details about the application can be written in text here.
- `src` - keeps the root directory clean and provides a clear separation between the source code and other assets
- `tests` - can hold unit tests for your application, keeps them separate from source files
- `vendor` - holds project dependencies, and 3rd party code that you did not write
- `webpack.config.js` - webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser

If you used the extension generator to create your extension, you'll need to complete a few final steps to see it in action.

First, navigate to your extension's root directory on your development server:
## Setting Up a Developer Environment

```sh
cd /your/server/wc-content/plugins/your-extension/
```
We recommend using `wp-env` to spin up local development environments. You can [learn more about wp-env here](https://make.wordpress.org/core/2020/03/03/wp-env-simple-local-environments-for-wordpress/). If you don’t already have wp-env installed locally, you can install it using
`npm -g i @wordpress/env`.

Then install the project's dependencies.
Once you’ve installed `wp-env`, and while still inside your `my-extension-name` folder, run `wp-env` start. After a few seconds, a test WordPress site with your WooCommerce and your extension installed will be running on `localhost:8888`.

```sh
npm install
```
If you didn’t set a custom name for your extension, you can visit [here](http://localhost:8888/wp-admin/admin.php?page=wc-admin&path=%2Fmy-extension-name) to see the settings page generated by /src/index.js. The default username/password combination for `wp-env` is `admin` / `password`.

Finally, run the start script to generate an initial build of your extension. This script will also continuously watch your local files for changes.
## Next Steps

```sh
npm start
```
Now that you’ve bootstrapped your extension, it’s time to add some features! Here’s some simple ones you could include:

Once your initial build is complete, you can browse to the administrative area of your local WordPress environment and activate your extension. If everything worked as it should, you should see a message in your browser's JavaScript console:
[How to add a custom field to simple and variable products](https://developer.woo.com/docs/how-to-add-a-custom-field-to-simple-and-variable-products/)

```sh
hello world
```
## Reference

[Visit @woocommerce/create-woo-extension on NPM for package reference](https://www.npmjs.com/package/@woocommerce/create-woo-extension)
[Check out wp-env’s command reference to learn more about advanced functionality](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#command-reference)
4 changes: 4 additions & 0 deletions packages/js/product-editor/changelog/add-43047
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Add menu item to publish button with 'Move to trash'
@@ -0,0 +1,4 @@
Significance: minor
Type: dev

Modify product header #44711
@@ -0,0 +1,4 @@
Significance: minor
Type: update

Set product editor blocks multiple support to true.
Expand Up @@ -20,7 +20,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -25,7 +25,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -5,7 +5,7 @@
"title": "Taxonomy",
"category": "widgets",
"description": "A block that displays a taxonomy field, allowing searching, selection, and creation of new items",
"keywords": [ "taxonomy"],
"keywords": [ "taxonomy" ],
"textdomain": "default",
"attributes": {
"slug": {
Expand Down Expand Up @@ -36,7 +36,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -21,7 +21,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -31,7 +31,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -20,7 +20,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -26,7 +26,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -22,7 +22,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -47,7 +47,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false
Expand Down
Expand Up @@ -23,7 +23,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down
Expand Up @@ -16,7 +16,7 @@
"supports": {
"align": false,
"html": false,
"multiple": false,
"multiple": true,
"reusable": false,
"inserter": false,
"lock": false,
Expand Down

0 comments on commit dd607cf

Please sign in to comment.