Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
34099d4
Getting Started with JavaScript
mkaz Dec 7, 2018
8ac0ca1
Reorder add_action/function
mkaz Dec 8, 2018
5b19984
Update prefix to use myguten, instead of just my
mkaz Dec 8, 2018
c3079b8
Update docs/designers-developers/developers/tutorials/javascript/read…
danielbachhuber Dec 8, 2018
5ad961d
Update to block_editor_assets
mkaz Dec 8, 2018
0901f98
Updates per danielbachhuber review.
mkaz Dec 8, 2018
7507870
Updates, and broken up into sections
mkaz Dec 9, 2018
cf6b13a
Add Troubleshooting
mkaz Dec 9, 2018
5041572
Updates with suggestion. Props to @nosolosw
mkaz Dec 11, 2018
6601f91
Update docs/designers-developers/developers/tutorials/javascript/vers…
nosolosw Dec 11, 2018
c45f603
Update docs/designers-developers/developers/tutorials/javascript/vers…
nosolosw Dec 11, 2018
bad714f
Add screenshot with style
mkaz Dec 11, 2018
264aa4f
Reorder TOC, move versions to end
mkaz Dec 11, 2018
a76276e
Update link for browser support
mkaz Dec 11, 2018
71f99fa
Add check for dependency to troubleshooting section
mkaz Dec 12, 2018
8f77bbc
General edits for spelling and flow
mkaz Dec 12, 2018
cf0bf1c
Update Table of Contents and generated manifest
mkaz Dec 14, 2018
b8b13e1
Fix up header tags consistency and spaces
mkaz Dec 14, 2018
01757a7
Edits per @chrisvanpatten review
mkaz Dec 14, 2018
45d962b
Update docs/designers-developers/developers/tutorials/javascript/exte…
chrisvanpatten Dec 14, 2018
bdcb766
Update docs/designers-developers/developers/tutorials/javascript/load…
chrisvanpatten Dec 14, 2018
3e54778
Update docs/designers-developers/developers/tutorials/javascript/load…
chrisvanpatten Dec 14, 2018
481ed44
Update docs/designers-developers/developers/tutorials/javascript/load…
chrisvanpatten Dec 14, 2018
e3aa456
Update docs/designers-developers/developers/tutorials/javascript/plug…
chrisvanpatten Dec 14, 2018
94132aa
Update docs/designers-developers/developers/tutorials/javascript/plug…
chrisvanpatten Dec 14, 2018
867c96e
Move screenshots to assets directory, add additional screenshot for s…
mkaz Dec 14, 2018
7f01078
Move block style variant to assets
mkaz Dec 14, 2018
be107c7
Formating
mkaz Dec 14, 2018
28f6e25
Update images to full URLs
mkaz Dec 14, 2018
081f6c4
Fix titles
mkaz Dec 15, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update prefix to use myguten, instead of just my
  • Loading branch information
mkaz committed Dec 14, 2018
commit 5b19984aaa1c5fa3a6c405f76ebd301f64532dc5
33 changes: 16 additions & 17 deletions docs/designers-developers/developers/tutorials/javascript/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ The purpose of this tutorial is to step through getting started with JavaScript

## Plugins Background

The primary means of extending WordPress remains the plugin, see [Plugin Basics](https://developer.wordpress.org/plugins/the-basics/) for more. The quick start is create a new directory in `wp-content/plugins/` to hold your plugin code, call it `my-plugin`.
The primary means of extending WordPress remains the plugin, see [Plugin Basics](https://developer.wordpress.org/plugins/the-basics/) for more. The quick start is create a new directory in `wp-content/plugins/` to hold your plugin code, call it `myguten-plugin`.

Inside of this new directory, create a file called `my-plugin.php` which will be the server-side code the runs when your plugin is active. For now you can just place the following in that file:
Inside of this new directory, create a file called `myguten-plugin.php` which will be the server-side code the runs when your plugin is active. For now you can place the following in that file:

```php
<?php
/*
Plugin Name: My Plugin
Plugin Name: My Guten Plugin
*/
```

So you should have a directory `wp-content/plugins/my-plugin/` which has the single file `my-plugin.php`. Once that is in place, you can go to your plugins list in `wp-admin` and you should see your plugin listed.
So you should have a directory `wp-content/plugins/myguten-plugin/` which has the single file `myguten-plugin.php`. Once that is in place, you can go to your plugins list in `wp-admin` and you should see your plugin listed.

Click **Activate** and your plugin will load with WordPress.

Expand All @@ -26,19 +26,19 @@ Click **Activate** and your plugin will load with WordPress.

Now with the plugin in place, we can add our code that loads the JavaScript we want to use. This follows the standard WordPress methodology of enqueuing your scripts, see [Including CSS & JavaScript](https://developer.wordpress.org/themes/basics/including-css-javascript/) for more details.

Add the following code to your `my-plugin.php` file:
Add the following code to your `myguten-plugin.php` file:

```php
function my_enqueue( $hook ) {
wp_enqueue_script( 'my-plugin',
plugins_url( 'my-plugin.js', __FILE__ ),
function myguten_enqueue( $hook ) {
wp_enqueue_script( 'myguten-script',
plugins_url( 'myguten.js', __FILE__ ),
array( 'wp-blocks', 'wp-element' )
);
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
add_action( 'admin_enqueue_scripts', 'myguten_enqueue' );
```

Create a file called `my-plugin.js` and add:
Create a file called `myguten.js` and add:

```js
console.log( "I'm loaded!" );
Expand All @@ -48,7 +48,7 @@ Now go to any page within `/wp-admin/` and check your browser Developer Tools, a

The script enqueuing used the `admin_enqueue_scripts` hook which only loads the JavaScript within the wp-admin section. So if you navigate to any front-end page or article on your site, you will not see the message.

**Note:** The last argument in the `wp_enqueue_script()` function is an array of dependencies, all of the Gutenberg packages are registered and can be loaded by specifying in the array, blocks and elements are shown as two common examples.
**Note:** The last argument in the `wp_enqueue_script()` function is an array of dependencies, all of the Gutenberg packages are registered and can be loaded by specifying them in the array, blocks and elements are shown as two common examples.

Recap at this point, we have a plugin which loads JavaScript, we're off to a good start.

Expand All @@ -68,7 +68,7 @@ This puts all the initial pieces in place for you to start extending the Block E

Let's look at using the [Block Style Variation example](../../../../../docs/designers-developers/developers/filters/block-filters/#block-style-variations).

Update the file `my-plugin.js` with:
Update the file `myguten.js` with:

```js
wp.blocks.registerBlockStyle( 'core/quote', {
Expand All @@ -94,16 +94,15 @@ You could create a `style.css` file with:

```

and enqueue the CSS by adding the following to your `my-plugin.php`:
and enqueue the CSS by adding the following to your `myguten-plugin.php`:

```php
function my_stylesheet() {
wp_enqueue_style( 'my-style', plugins_url( 'style.css', __FILE__ ) );
function myguten_stylesheet() {
wp_enqueue_style( 'myguten-style', plugins_url( 'style.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
add_action( 'wp_enqueue_scripts', 'myguten_stylesheet' );
```

And then when you view the page, you should see it in a very large font.