diff --git a/docs/designers-developers/developers/internationalization.md b/docs/designers-developers/developers/internationalization.md index 5dcd88f0112614..e8e02de2192e96 100644 --- a/docs/designers-developers/developers/internationalization.md +++ b/docs/designers-developers/developers/internationalization.md @@ -26,7 +26,7 @@ The new script package is registered with WordPress as `wp-i18n` and should be d Depending on your developer workflow, you might want to use WP-CLI's `wp i18n make-pot` command or a build tool for Babel called `@wordpress/babel-plugin-makepot` to create the necessary translation file. The latter approach integrates with Babel to extract the I18N methods. -### Common methods in wp.i18n (may look similar) +### Common Methods in wp.i18n (May Look Similar) - `setLocaleData( data: Object, domain: string )`: Creates a new I18N instance providing translation data for a domain. - `__( 'Hello World', 'my-text-domain' )`: Translate a certain string. diff --git a/docs/designers-developers/developers/packages.md b/docs/designers-developers/developers/packages.md index 66235b7fa17b86..e2d5a97a482117 100644 --- a/docs/designers-developers/developers/packages.md +++ b/docs/designers-developers/developers/packages.md @@ -2,7 +2,7 @@ WordPress exposes a list of JavaScript packages and tools for WordPress development. -## Using the packages via WordPress global +## Using the Packages via WordPress Global JavaScript packages are available as a registered script in WordPress and can be accessed using the `wp` global variable. @@ -22,7 +22,7 @@ const { PlainText } = wp.editor; ``` -## Using the packages via npm +## Using the Packages via npm All the packages are also available on [npm](https://www.npmjs.com/org/wordpress) if you want to bundle them in your code. diff --git a/docs/designers-developers/developers/tutorials/format-api/1-register-format.md b/docs/designers-developers/developers/tutorials/format-api/1-register-format.md index 80d091d214ba6e..667a63206295e4 100644 --- a/docs/designers-developers/developers/tutorials/format-api/1-register-format.md +++ b/docs/designers-developers/developers/tutorials/format-api/1-register-format.md @@ -1,4 +1,4 @@ -# Register a new format +# Register a New Format The first thing you're going to do in this tutorial is to register the new format that the plugin intends to apply. WordPress has the [`registerFormatType`](/packages/rich-text/README.md#registerFormatType) function to do so. diff --git a/docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md b/docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md index 19ae587159c76a..8aea061c5ef169 100644 --- a/docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md +++ b/docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md @@ -1,4 +1,4 @@ -# Add a button to the toolbar +# Add a Button to the Toolbar Now that the format is avaible, the next step is to surface it to the UI. You can make use of the [`RichTextToolbarButton`](/packages/editor/src/components/rich-text/README.md#RichTextToolbarButton) component to extend the format toolbar. diff --git a/docs/designers-developers/developers/tutorials/format-api/3-apply-format.md b/docs/designers-developers/developers/tutorials/format-api/3-apply-format.md index 0fbcd031db5f22..278f74143882ce 100644 --- a/docs/designers-developers/developers/tutorials/format-api/3-apply-format.md +++ b/docs/designers-developers/developers/tutorials/format-api/3-apply-format.md @@ -1,4 +1,4 @@ -# Apply the format when the button is clicked +# Apply the Format When the Button Is Clicked So far, your custom button doesn't modify the text selected, it only renders a message in the console. Let's change that. diff --git a/docs/designers-developers/developers/tutorials/format-api/README.md b/docs/designers-developers/developers/tutorials/format-api/README.md index 2f41423a3f92c4..3ecb76c07e0596 100644 --- a/docs/designers-developers/developers/tutorials/format-api/README.md +++ b/docs/designers-developers/developers/tutorials/format-api/README.md @@ -6,7 +6,7 @@ In WordPress lingo, a _format_ is a [HTML tag with text-level semantics](https:/ If you are unfamiliar with how to work with WordPress plugins and JavaScript, you may want to check the [JavaScript Tutorial](/docs/designers-developers/developers/tutorials/javascript/readme.md) first. -## Table of contents +## Table of Contents 1. [Register a new format](/docs/designers-developers/developers/tutorials/format-api/1-register-format.md) 2. [Add a button to the toolbar](/docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md) diff --git a/docs/designers-developers/developers/tutorials/javascript/scope-your-code.md b/docs/designers-developers/developers/tutorials/javascript/scope-your-code.md index 58ddcbcaf05531..5d78b928ae603a 100644 --- a/docs/designers-developers/developers/tutorials/javascript/scope-your-code.md +++ b/docs/designers-developers/developers/tutorials/javascript/scope-your-code.md @@ -1,4 +1,4 @@ -# Scope your code +# Scope Your Code Historically, JavaScript files loaded in a web page share the same scope. This means that a global variable declared in one file will be seen by the code in other files. @@ -26,7 +26,7 @@ When loaded on the same page, `first.js` and `second.js` will output the plugin This behavior can be problematic, and is the reason we need to scope the code. By scoping the code—ensuring each file is isolated from each other—we can prevent values unexpectedly changing. -## Scoping code within a function +## Scoping Code Within a Function In JavaScript, you can scope your code by writing it within a function. Functions have "local scope", or a scope that is specific only to that function. Aditionally, in JavaScript you can write anonymous functions, functions without a name, which will also prevent your function name from being overridden in the global scope. @@ -58,7 +58,7 @@ function() { With this trick, the different files won't override each other's variables. Unfortunately, they also won't work as expected, because these functions are being called by no one. We've only _defined_ the functions; we haven't _executed_ them yet. -## Automatically execute anonymous functions +## Automatically Execute Anonymous Functions It turns out there are a few ways to execute anonymous functions in JavaScript, but the most popular is this: @@ -106,7 +106,7 @@ On the other hand, `third.js` doesn't declare a `pluginName` variable, but needs } )( window.pluginName ) ``` -## Future changes +## Future Changes At the beginning we mentioned that: diff --git a/docs/designers-developers/developers/tutorials/javascript/troubleshooting.md b/docs/designers-developers/developers/tutorials/javascript/troubleshooting.md index 056fa803cbd613..c5b6d9895c91b5 100644 --- a/docs/designers-developers/developers/tutorials/javascript/troubleshooting.md +++ b/docs/designers-developers/developers/tutorials/javascript/troubleshooting.md @@ -16,7 +16,7 @@ If you are not seeing your changes, check that your JavaScript file is being enq If you do not see the file being loaded, doublecheck the enqueue function is correct. You can also check your server logs to see if there is an error messages. -## Confirm all dependencies are loaded +## Confirm All Dependencies Are Loaded The console log will show an error if a dependency your JavaScript code uses has not been declared and loaded in the browser. In the example, if `myguten.js` script is enqueued without declaring the `wp-blocks` dependency, the console log will show: diff --git a/docs/designers-developers/developers/tutorials/javascript/versions-and-building.md b/docs/designers-developers/developers/tutorials/javascript/versions-and-building.md index c7de41efd4d0a8..fb52d247d78611 100644 --- a/docs/designers-developers/developers/tutorials/javascript/versions-and-building.md +++ b/docs/designers-developers/developers/tutorials/javascript/versions-and-building.md @@ -1,4 +1,4 @@ -# JavaScript versions and build step +# JavaScript Versions and Build Step The Gutenberg Handbook shows JavaScript examples in two syntaxes: ES5 and ESNext. These are version names for the JavaScript language standard definitions. You may also see elsewhere the names ES6, or ECMAScript 2015 mentioned. See the [ECMAScript](https://en.wikipedia.org/wiki/ECMAScript) Wikipedia article for all the details. diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md index 3ec8bcba59e930..f5f270cc9c5330 100644 --- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md +++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md @@ -1,4 +1,4 @@ -# Creating a sidebar for your plugin +# Creating a Sidebar for Your Plugin This tutorial starts with you having an existing plugin setup and ready to add PHP and JavaScript code. Please, refer to [Getting started with JavaScript](/docs/designers-developers/developers/tutorials/javascript/) tutorial for an introduction to WordPress plugins and how to use JavaScript to extend the block editor. diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-1-up-and-running.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-1-up-and-running.md index 6b9c335f335a58..73355c151a6fb5 100644 --- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-1-up-and-running.md +++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-1-up-and-running.md @@ -1,4 +1,4 @@ -# Get a sidebar up and running +# Get a Sidebar up and Running The first step in the journey is to tell the editor that there is a new plugin that will have its own sidebar. You can do so by using the [registerPlugin](/packages/plugins/REAMDE.md), [PluginSidebar](/packages/edit-post/README.md#pluginsidebar), and [createElement](/packages/element/README.md) utilities provided by WordPress, to be found in the `@wordpress/plugins`, `@wordpress/edit-post`, and `@wordpress/element` [packages](/docs/designers-developers/developers/packages.md), respectively. diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md index 9434ee462fc8bf..da1717c8817f2b 100644 --- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md +++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md @@ -1,4 +1,4 @@ -# Register the meta field +# Register the Meta Field To work with fields in the `post_meta` table, WordPress has a function called [register_meta](https://developer.wordpress.org/reference/functions/register_meta/). You're going to use it to register a new field called `sidebar_plugin_meta_block_field`, which will be a single string. Note that this field needs to be available through the [REST API](https://developer.wordpress.org/rest-api/) because that's how the block editor access data. diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-4-initialize-input.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-4-initialize-input.md index d826d9df5547cc..bc602e39b27983 100644 --- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-4-initialize-input.md +++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-4-initialize-input.md @@ -1,4 +1,4 @@ -# Initialize the input control +# Initialize the Input Control Now that the field is available in the editor store, it can be surfaced to the UI. The first step will be to extract the input control to a separate function so you can expand its functionality while the code stays clear. diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-5-update-meta.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-5-update-meta.md index 0ccab7e115b18f..ac5a9884cae9fa 100644 --- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-5-update-meta.md +++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-5-update-meta.md @@ -1,4 +1,4 @@ -# Update the meta field when the input's content changes +# Update the Meta Field When the Input's Content Changes The last step in the journey is to update the meta field when the input content changes. To do that, you'll use another utility from the `@wordpress/data` package, [withDispatch](/packages/data/README.md#withdispatch-mapdispatchtoprops-function-function). diff --git a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-6-finishing-touches.md b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-6-finishing-touches.md index e15b452d597620..b399c2e59189d5 100644 --- a/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-6-finishing-touches.md +++ b/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-6-finishing-touches.md @@ -1,4 +1,4 @@ -# Finishing touches +# Finishing Touches Your JavaScript code now works as expected, here are a few ways to simplify and make it easier to change in the future. diff --git a/docs/manifest.json b/docs/manifest.json index 974392def6be0c..31ad58370f291d 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -234,13 +234,13 @@ "parent": "javascript" }, { - "title": "JavaScript versions and build step", + "title": "JavaScript Versions and Build Step", "slug": "versions-and-building", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/javascript/versions-and-building.md", "parent": "javascript" }, { - "title": "Scope your code", + "title": "Scope Your Code", "slug": "scope-your-code", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/javascript/scope-your-code.md", "parent": "javascript" @@ -288,13 +288,13 @@ "parent": "tutorials" }, { - "title": "Creating a sidebar for your plugin", + "title": "Creating a Sidebar for Your Plugin", "slug": "plugin-sidebar-0", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md", "parent": "tutorials" }, { - "title": "Get a sidebar up and running", + "title": "Get a Sidebar up and Running", "slug": "plugin-sidebar-1-up-and-running", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-1-up-and-running.md", "parent": "plugin-sidebar-0" @@ -306,25 +306,25 @@ "parent": "plugin-sidebar-0" }, { - "title": "Register the meta field", + "title": "Register the Meta Field", "slug": "plugin-sidebar-3-register-meta", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-3-register-meta.md", "parent": "plugin-sidebar-0" }, { - "title": "Initialize the input control", + "title": "Initialize the Input Control", "slug": "plugin-sidebar-4-initialize-input", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-4-initialize-input.md", "parent": "plugin-sidebar-0" }, { - "title": "Update the meta field when the input's content changes", + "title": "Update the Meta Field When the Input's Content Changes", "slug": "plugin-sidebar-5-update-meta", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-5-update-meta.md", "parent": "plugin-sidebar-0" }, { - "title": "Finishing touches", + "title": "Finishing Touches", "slug": "plugin-sidebar-6-finishing-touches", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-6-finishing-touches.md", "parent": "plugin-sidebar-0" @@ -336,19 +336,19 @@ "parent": "tutorials" }, { - "title": "Register a new format", + "title": "Register a New Format", "slug": "1-register-format", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/format-api/1-register-format.md", "parent": "format-api" }, { - "title": "Add a button to the toolbar", + "title": "Add a Button to the Toolbar", "slug": "2-toolbar-button", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/format-api/2-toolbar-button.md", "parent": "format-api" }, { - "title": "Apply the format when the button is clicked", + "title": "Apply the Format When the Button Is Clicked", "slug": "3-apply-format", "markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/developers/tutorials/format-api/3-apply-format.md", "parent": "format-api"