ed88ebb55c
This changeset adds a new API for WordPress, designed to work with native ES Modules and Import Maps. It introduces functions such as `wp_register_module`, and `wp_enqueue_module`.
The API aims to provide a familiar experience to the existing `WP_Scripts` class, offering similar functionality. However, **it's not intended to duplicate the exact functionality of `WP_Scripts`**; rather, it is carefully tailored to address the specific needs and capabilities of ES modules.
For this initial version, **the current proposal is intentionally simplistic**, covering only the essential features needed to work with ES modules. Other enhancements and optimizations can be added later as the community identifies additional requirements and use cases.
== Differences Between WP_Script_Modules and WP_Scripts
=== Dependency Specification
With `WP_Script_Modules`, the array of dependencies supports not only strings but also arrays that include the dependency import type (`static` or `dynamic`). This design choice allows for future extensions of dependency properties, such as adding a `version` property to support "scopes" within import maps.
=== Module Identifier
Instead of a handle, `WP_Script_Modules` utilizes the module identifier, aligning with the module identifiers used in JavaScript files and import maps.
=== Deregistration
There is no equivalent of `wp_deregister_script` at this stage.
== API
=== `wp_register_module( $module_identifier, $src, $deps, $version )`
Registers a module.
{{{
// Registers a module with dependencies and versioning.
wp_register_module(
'my-module',
'/path/to/my-module.js',
array( 'static-dependency-1', 'static-dependency-2' ),
'1.2.3'
);
}}}
{{{
// my-module.js
import { ... } from 'static-dependency-1';
import { ... } from 'static-dependency-2';
// ...
}}}
{{{
// Registers a module with a dynamic dependency.
wp_register_module(
'my-module',
'/path/to/my-module.js',
array(
'static-dependency',
array(
'id' => 'dynamic-dependency',
'import' => 'dynamic'
),
)
);
}}}
{{{
// my-module.js
import { ... } from 'static-dependency';
// ...
const dynamicModule = await import('dynamic-dependency');
}}}
=== `wp_enqueue_module( $module_identifier, $src, $deps, $version )`
Enqueues a module. If a source is provided, it will also register the module.
{{{
wp_enqueue_module( 'my-module' );
}}}
=== `wp_dequeue_module( $module_identifier )`
Dequeues a module.
{{{
wp_dequeue_module( 'my-module' );
}}}
== Output
- When modules are enqueued, they are printed within script tags containing `type="module"` attributes.
- Additionally, static dependencies of enqueued modules utilize `link` tags with `rel="modulepreload"` attributes.
- Lastly, an import map is generated and inserted using a `<script type="importmap">` tag.
{{{
<script type="module" src="/path/to/my-module.js" id="my-module"></script>
<link rel="modulepreload" href="/path/to/static-dependency.js" id="static-dependency" />
<script type="importmap">
{
"imports": {
"static-dependency": "/path/to/static-dependency.js",
"dynamic-dependency": "/path/to/dynamic-dependency.js"
}
}
</script>
}}}
== Import Map Polyfill Requirement
Even though all major browsers already support import maps, an import map polyfill is required until the percentage of users using old browser versions without import map support drops significantly.
This work is ongoing and will be added once it's ready. Progress is tracked in #60232.
Props luisherranz, idad5, costdev, neffff, joemcgill, jorbin, swissspidy, jonsurrell, flixos90, gziolo, westonruter.
Fixes #56313.
git-svn-id: https://develop.svn.wordpress.org/trunk@57269 602fd350-edb4-49c9-b593-d223f7449a82
|
||
|---|---|---|
| .cache | ||
| .devcontainer | ||
| .github | ||
| src | ||
| tests | ||
| tools | ||
| .editorconfig | ||
| .env | ||
| .eslintignore | ||
| .eslintrc-jsdoc.js | ||
| .git-blame-ignore-revs | ||
| .gitignore | ||
| .jshintrc | ||
| .npmrc | ||
| .nvmrc | ||
| .version-support-mysql.json | ||
| .version-support-php.json | ||
| composer.json | ||
| CONTRIBUTING.md | ||
| docker-compose.yml | ||
| Gruntfile.js | ||
| jsdoc.conf.json | ||
| package-lock.json | ||
| package.json | ||
| phpcompat.xml.dist | ||
| phpcs.xml.dist | ||
| phpunit.xml.dist | ||
| README.md | ||
| SECURITY.md | ||
| webpack.config.js | ||
| wp-cli.yml | ||
| wp-config-sample.php | ||
| wp-tests-config-sample.php | ||
WordPress
Welcome to the WordPress development repository! Please check out the contributor handbook for information about how to open bug reports, contribute patches, test changes, write documentation, or get involved in any way you can.
Getting Started
Using GitHub Codespaces
To get started, create a codespace for this repository by clicking this 👇
A codespace will open in a web-based version of Visual Studio Code. The dev container is fully configured with softwares needed for this project.
Note: Dev containers is an open spec which is supported by GitHub Codespaces and other tools.
In some browsers the keyboard shortcut for opening the command palette (Ctrl/Command + Shift + P) may collide with a browser shortcut. The command palette can be opened via the F1 key or via the cog icon in the bottom left of the editor.
When opening your codespace, be sure to wait for the postCreateCommand to finish running to ensure your WordPress install is successfully set up. This can take a few minutes.
Local development
WordPress is a PHP, MySQL, and JavaScript based project, and uses Node for its JavaScript dependencies. A local development environment is available to quickly get up and running.
You will need a basic understanding of how to use the command line on your computer. This will allow you to set up the local development environment, to start it and stop it when necessary, and to run the tests.
You will need Node and npm installed on your computer. Node is a JavaScript runtime used for developer tooling, and npm is the package manager included with Node. If you have a package manager installed for your operating system, setup can be as straightforward as:
- macOS:
brew install node - Windows:
choco install nodejs - Ubuntu:
apt install nodejs npm
If you are not using a package manager, see the Node.js download page for installers and binaries.
Note: WordPress currently only officially supports Node.js 20.x and npm 10.x.
You will also need Docker installed and running on your computer. Docker is the virtualization software that powers the local development environment. Docker can be installed just like any other regular application.
Development Environment Commands
Ensure Docker is running before using these commands.
To start the development environment for the first time
Clone the current repository using git clone https://github.com/WordPress/wordpress-develop.git. Then in your terminal move to the repository folder cd wordpress-develop and run the following commands:
npm install
npm run build:dev
npm run env:start
npm run env:install
Your WordPress site will be accessible at http://localhost:8889. You can see or change configurations in the .env file located at the root of the project directory.
To watch for changes
If you're making changes to WordPress core files, you should start the file watcher in order to build or copy the files as necessary:
npm run dev
To stop the watcher, press ctrl+c.
To run a WP-CLI command
npm run env:cli -- <command>
WP-CLI has many useful commands you can use to work on your WordPress site. Where the documentation mentions running wp, run npm run env:cli -- instead. For example:
npm run env:cli -- help
To run the tests
These commands run the PHP and end-to-end test suites, respectively:
npm run test:php
npm run test:e2e
You can pass extra parameters into the PHP tests by adding -- and then the command-line options:
npm run test:php -- --filter <test name>
npm run test:php -- --group <group name or ticket number>
To restart the development environment
You may want to restart the environment if you've made changes to the configuration in the docker-compose.yml or .env files. Restart the environment with:
npm run env:restart
To stop the development environment
You can stop the environment when you're not using it to preserve your computer's power and resources:
npm run env:stop
To start the development environment again
Starting the environment again is a single command:
npm run env:start
Credentials
These are the default environment credentials:
- Database Name:
wordpress_develop - Username:
root - Password:
password
To login to the site, navigate to http://localhost:8889/wp-admin.
- Username:
admin - Password:
password
Note: With Codespaces, open the portforwarded URL from the ports tab in the terminal, and append /wp-admin to login to the site.
To generate a new password (recommended):
- Go to the Dashboard
- Click the Users menu on the left
- Click the Edit link below the admin user
- Scroll down and click 'Generate password'. Either use this password (recommended) or change it, then click 'Update User'. If you use the generated password be sure to save it somewhere (password manager, etc).