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

Docs: Move DevEnv to own section for docs #23593

Merged
merged 12 commits into from
Jul 14, 2020
Prev Previous commit
Next Next commit
Update links to new devenv section
  • Loading branch information
mkaz committed Jul 9, 2020
commit f3130ea6cce543d5e54aa0b3972313f236da971c
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,17 @@ You now need to activate the plugin from inside wp-admin plugins page.

After activated, go to the block editor and use the inserter to search and add your new block.

## Prerequisities

The first thing you need is a development enviornment and tools. This includes setting up your WordPress environment, Node, NPM, and your code editor. If you need help, see the [setting up your development environment documentation](/docs/designers-developers/developers/tutorials/devenv/readme.md).

## Table of Contents

1. [Development Environment](devenv.md)
2. [WordPress Plugin](wp-plugin.md)
3. [Anatomy of a Block](block-anatomy.md)
The create a block tutorials breaks down to the following sections.

1. [WordPress Plugin](wp-plugin.md)
2. [ESNext Syntax](esnext-js.md)
3. [Anatomy of a Gutenberg Block ](block-anatomy.md)
4. [Block Attributes](block-attributes.md)
5. [Code Implementation](block-code.md)
6. [Authoring Experience](author-experience.md)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Let's confirm the plugin is loaded and working.

-or-

(3B) If you are using `wp-env`, see [Development Environment setup](devenv.md), then you should now run this command from inside the `gutenpride` directory:
(3B) If you are using `wp-env`, see [Development Environment setup](/docs/designers-developers/developers/tutorials/devenv/readme.md), then you should now run from inside the `gutenpride` directory:

```sh
wp-env start
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
# Development Environment

We will need a place to work and tools for creating a block, this is often referred to as the development environment. The three main pieces needed for our development environment are:
The development environment setup guide is for setting up your local development environment for JavaScript development; creating plugins and tools for extending WordPress and the block editor.

A development enviornment is a catch-all term for the setup on your computer to work. The three main pieces needed for our development environment are:

1. Node/NPM Development Tools
2. WordPress Development Site
Expand Down
16 changes: 9 additions & 7 deletions docs/designers-developers/developers/tutorials/readme.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
# Tutorials

* See the [Getting Started with JavaScript Tutorial](/docs/designers-developers/developers/tutorials/javascript/readme.md) to learn about how to use JavaScript within WordPress.
- First things first, see [setting up your development environment](/docs/designers-developers/developers/tutorials/javascript/readme.md) for the tools and setup you need to extend the block editor.

* The [Blocks Tutorial](/docs/designers-developers/developers/tutorials/block-tutorial/readme.md) is the best place to start to learn more about block creation.
- See the [Getting Started with JavaScript Tutorial](/docs/designers-developers/developers/tutorials/javascript/readme.md) to learn about how to use JavaScript within WordPress.

* See the [Meta Boxes Tutorial](/docs/designers-developers/developers/tutorials/metabox/readme.md) for new ways of extending the editor storing and using post meta data.
- The [Blocks Tutorial](/docs/designers-developers/developers/tutorials/block-tutorial/readme.md) is the best place to start to learn more about block creation.

* Check out the [Notices Tutorial](/docs/designers-developers/developers/tutorials/notices/README.md) to learn how to display informational UI at the top of the editor.
- See the [Meta Boxes Tutorial](/docs/designers-developers/developers/tutorials/metabox/readme.md) for new ways of extending the editor storing and using post meta data.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated to this PR, but can we move Meta Boxes Tutorial further? :)


* The [Sidebar Tutorial](/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md) will walk you through the steps of creating a sidebar to update data from the `post_meta` table.
- Check out the [Notices Tutorial](/docs/designers-developers/developers/tutorials/notices/README.md) to learn how to display informational UI at the top of the editor.

* Learn how to add customized buttons to the toolbar with the [Format API tutorial](/docs/designers-developers/developers/tutorials/format-api/).
- The [Sidebar Tutorial](/docs/designers-developers/developers/tutorials/sidebar-tutorial/plugin-sidebar-0.md) will walk you through the steps of creating a sidebar to update data from the `post_meta` table.

* Build your own [custom block editor instance](/docs/designers-developers/developers/platform/custom-block-editor/) - this will walk you through building a standalone instance of the block editor within WP Admin.
- Learn how to add customized buttons to the toolbar with the [Format API tutorial](/docs/designers-developers/developers/tutorials/format-api/).

- Build your own [custom block editor instance](/docs/designers-developers/developers/platform/custom-block-editor/) - this will walk you through building a standalone instance of the block editor within WP Admin.