Go to file
Adam Silverstein 9bbf3985e3 Media: enable generating multiple mime types for image uploads; specifically WebP versions for JPEG images by default.
This changeset adds the capability for core media uploads to generate sub sized images in more than a single mime type. The output formats for each mime type can be controlled through a filter. WebP is used as an additional output format for JPEG images by default to improve front end performance.

When generating additional mime types, only images which are smaller than the respective original are retained. By default, additional mime type images are only generated for the built-in core image sizes and any custom sizes that have opted in.

Image meta is updated with a new 'sources' array containing file details for each mime type. Each image size in the 'sizes' array also gets a new 'sources' array that contains the image file details for each mime type.

This change also increases image upload retries to accommodate additional image sizes. It also adds a `$mime_type` parameter to the `wp_get_missing_image_subsizes` function and filter.

This change adds three new filters to enable full control of secondary mime image generation and output:

* A new filter `wp_image_sizes_with_additional_mime_type_support` that filters the sizes that support secondary mime type output. Developers can use this to control the output of additional mime type sub-sized images on a per size basis.
* A new filter `wp_upload_image_mime_transforms` that filters the output mime types for a given input mime type. Developers can use this to control generation of additional mime types for a given input mime type or even override the original mime type.
* A new filter `wp_content_image_mimes` which controls image mime type output selection and order for frontend content. Developers can use this to control the mime type output preference order for content images. Content images inserted from the media library will use the available image versions based on the order from this filter.

Thanks to the many contributors who helped develop, test and give feedback on this feature.

A haiku to summarize:

Upload a JPEG
Images of all sizes
Output as WebPs

Props flixos90, MatthiasReinholz, studiolxv, markhowellsmead, eatingrules, pbiron, mukesh27, joegrainger, mehulkaklotar, tweetythierry, akshitsethi, peterwilsoncc, eugenemanuilov, mitogh, shetheliving, clarkeemily, codekraft, mikeschroder, clorith, kasparsd, spacedmonkey, trevorpfromsandee, jb510, scofennellgmailcom, seedsca, cagsmith, karinclimber, dainemawer, baxbridge, grapplerulrich, sobatkras, chynnabenton, tonylocalword, barneydavey, kwillmorth, garymatthews919, olliejones, imarkinteractive, jeffpaul, feastdesignco, webbeetle, masteradhoc.

See #55443.



git-svn-id: https://develop.svn.wordpress.org/trunk@53751 602fd350-edb4-49c9-b593-d223f7449a82
2022-07-21 18:01:01 +00:00
.cache Build/Test Tools: Cache the results of PHP_CodeSniffer across workflow runs. 2021-11-16 14:17:26 +00:00
.github Build/Test Tools: Add tag pattern matching for the testing NPM workflow. 2022-07-20 18:50:36 +00:00
src Media: enable generating multiple mime types for image uploads; specifically WebP versions for JPEG images by default. 2022-07-21 18:01:01 +00:00
tests Media: enable generating multiple mime types for image uploads; specifically WebP versions for JPEG images by default. 2022-07-21 18:01:01 +00:00
tools Tools: Automate backporting core blocks from Gutenberg to Core 2022-07-08 12:32:37 +00:00
.editorconfig General: Instruct file editors not to trim trailing whitespace in markdown files. 2018-03-20 22:14:53 +00:00
.env Build/Test Tools: Configure Xdebug modes in the local Docker environment. 2022-06-21 23:45:19 +00:00
.eslintignore Build/Test Tools: Enable JSDocs to be linted with ESLint. 2020-07-27 23:33:51 +00:00
.eslintrc-jsdoc.js Build/Test Tools: Enable JSDocs to be linted with ESLint. 2020-07-27 23:33:51 +00:00
.git-blame-ignore-revs Build/Test Tools: First pass at a .git-blame-ignore-revs file. 2022-03-29 03:20:29 +00:00
.gitignore Build/Test Tools: Cache the results of PHP_CodeSniffer across workflow runs. 2021-11-16 14:17:26 +00:00
.jshintrc Build tools: Fix the travis:js build. 2018-12-24 13:53:11 +00:00
.npmrc Once upon a midnight dreary, while I coded, weak and weary, 2018-05-23 10:04:22 +00:00
.nvmrc Build/Test Tools: Specify NodeJS version 14.x in the .nvmrc file. 2021-11-24 14:05:31 +00:00
composer.json Build/Test Tools: Update PHPCompatibilityWP to version 2.1.3. 2021-12-31 13:53:19 +00:00
CONTRIBUTING.md Build/Test Tools: Add a missing word to the CONTRIBUTING.md file. 2021-02-23 19:59:20 +00:00
docker-compose.yml Build/Test Tools: Enable loopback requests to work on the local development environment. 2022-07-02 22:52:38 +00:00
Gruntfile.js Tools: Automate backporting core blocks from Gutenberg to Core 2022-07-08 12:32:37 +00:00
jsdoc.conf.json Build Tools: Fix JSDoc configuration include paths. 2018-06-14 12:45:06 +00:00
package-lock.json External Libraries: Update the Moment library to version 2.29.4. 2022-07-19 19:41:12 +00:00
package.json External Libraries: Update the Moment library to version 2.29.4. 2022-07-19 19:41:12 +00:00
phpcompat.xml.dist Coding Standards: Replace the old wp-db.php filename in phpcompat.xml.dist. 2022-07-21 16:07:15 +00:00
phpcs.xml.dist Coding Standards: Move wp-includes/wp-db.php to wp-includes/class-wpdb.php. 2022-07-21 15:58:51 +00:00
phpunit.xml.dist Build/Test Tools: Update PHPUnit configuration for PHPUnit 9.5.10/8.5.21+. 2021-09-26 03:11:18 +00:00
README.md Build/Test Tools: Remove remaining Travis CI references. 2021-04-10 12:05:50 +00:00
SECURITY.md Security: Update the Security Policy to include WordPress 6.0. 2022-05-03 17:32:25 +00:00
webpack.config.js Build: Enable React Fast Refresh for block development 2022-04-11 16:08:12 +00:00
wp-cli.yml Build/Tests: Default to running unit tests from src. 2019-01-09 10:09:02 +00:00
wp-config-sample.php Docs: Use generic references to "Database" in wp-config-sample.php. 2021-12-14 08:42:16 +00:00
wp-tests-config-sample.php Docs: Use generic references to "Database" in wp-config-sample.php. 2021-12-14 08:42:16 +00:00

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

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.

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 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 a lot of 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

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

To generate a new password (recommended):

  1. Go to the Dashboard
  2. Click the Users menu on the left
  3. Click the Edit link below the admin user
  4. 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).