Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed typos and grammar, as well as spacing in code block #14778

Merged
merged 1 commit into from
Apr 3, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -34,21 +34,20 @@ See [Packages](/docs/designers-developers/developers/packages.md) for list of av

After you have updated both JavaScript and PHP files, go to the block editor and create a new post.

Add a quote block, and in the right sidebar under Styles, you will see your new Fancy Quote style listed. Click the Fancy Quote to select and apply that style to your quote block.
Add a quote block, and in the right sidebar under Styles, you will see your new Fancy Quote style listed. Click the Fancy Quote to select and apply that style to your quote block:


![Fancy Quote Style in Inspector](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/fancy-quote-in-inspector.png)


You will not see a visible change, even if you Preview or Publish the post. However, if you look at the source, you will see the `is-style-fancy-quote` class name is now attached to your quote block.
Even if you Preview or Publish the post you will not see a visible change. However, if you look at the source, you will see the `is-style-fancy-quote` class name is now attached to your quote block.

Let's add some style. Go ahead and create a `style.css` file with:

```css
.is-style-fancy-quote {
color: tomato;
}

```

You enqueue the CSS file by adding the following to your `myguten-plugin.php`:
Expand All @@ -60,7 +59,7 @@ function myguten_stylesheet() {
add_action( 'enqueue_block_assets', 'myguten_stylesheet' );
```

Now when you view in the editor and published, you will see your Fancy Quote style, a delicious tomato color text.
Now when you view in the editor and published, you will see your Fancy Quote style, a delicious tomato color text:

![Fancy Quote with Style](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/fancy-quote-with-style.png)

Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Additionally, the [Node.js download page](https://nodejs.org/en/download/) inclu

The Node Package Manager (npm) is a tool included with node. npm allows you to install and manage JavaScript packages. npm can also generate and process a special file called `package.json`, which contains some information about your project and the packages your project uses.

To start a new node project, first create a directory to work in.
To start a new node project, first create a directory to work in:

```
mkdir myguten-block
Expand Down Expand Up @@ -153,7 +153,7 @@ Yes, the initial setup is a bit more involved, but the additional features and b

With a setup in place, the standard workflow is:

- Install dependencies: `npm install`
- Start development builds: `npm start`
- Develop. Test. Repeat.
- Create production build: `npm run build`
1. Install dependencies: `npm install`
2. Start development builds: `npm start`
3. Develop. Test. Repeat.
4. Create production build: `npm run build`
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ If you're having trouble getting your code to work, here are a few ways to troub

The console log is a JavaScript developer's best friend. It is a good practice to work with it open, as it collects errors and notices into one place. See Mozilla's [JavaScript console](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console) documentation for more.

Your first step in debugging should be to check the JavaScript console for any errors. Here is an example, which shows a syntax error on line 6.
Your first step in debugging should be to check the JavaScript console for any errors. Here is an example, which shows a syntax error on line 6:

![console error](https://raw.githubusercontent.com/WordPress/gutenberg/master/docs/designers-developers/assets/js-tutorial-console-log-error.png)

Expand Down