-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Open "docs" folder for the Interactivity API package and Getting Star…
…ted Guide (#52462) * first version of the Interactivity API README * README v2 upon Luis feedback * headings adjusted * minor adjustments * add docs folder * requirements * minor adjustment * proper getting started structure * first version structure and contents * removed references to specific versions of Node * minor adjustments
- Loading branch information
1 parent
51a0796
commit 8aa016e
Showing
2 changed files
with
75 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
# Getting started with the Interactivity API | ||
|
||
To get started with the Interactivity API, you can follow this [**Quick Start Guide**](#quick-start-guide) by taking into account the [current requirements of the Interactivity API](#requirements-of-the-interactivity-api) (especially the need for Gutenberg 16.2 or superior). | ||
|
||
## Quick Start Guide | ||
|
||
### 1. Scaffold an interactive block | ||
|
||
We can scaffold a WordPress plugin that registers an interactive block (using the Interactivity API) by using a [template](https://www.npmjs.com/package/@wordpress/create-block-interactive-template) with the `@wordpress/create-block` command. | ||
|
||
``` | ||
npx @wordpress/create-block my-first-interactive-block --template @wordpress/create-block-interactive-template | ||
``` | ||
|
||
### 2. Generate the build | ||
|
||
When the plugin folder is generated, we should launch the build process to get the final version of the interactive block that can be used from WordPress. | ||
|
||
``` | ||
cd my-first-interactive-block && npm start | ||
``` | ||
|
||
### 3. Use it in your WordPress installation | ||
|
||
If you have a local WordPress installation already running, you can launch the commands above inside the `plugins` folder of that installation. If not, you can use [`wp-now`](https://github.com/WordPress/playground-tools/tree/trunk/packages/wp-now) to launch a WordPress site with the plugin installed by executing from the generated folder (and from a different terminal window or tab) the following command | ||
|
||
``` | ||
npx @wp-now/wp-now start | ||
``` | ||
|
||
At this point you should be able to insert the "Example Interactive" block into any post, and see how it behaves in the frontend when published. | ||
|
||
## Requirements of the Interactivity API | ||
|
||
To start working with the Interactivity API you'll need to have a [proper WordPress development environment for blocks](https://developer.wordpress.org/block-editor/getting-started/devenv/) which should include: | ||
|
||
- A local WordPress installation | ||
- Gutenberg 16.2 or superior | ||
- Node.js | ||
|
||
### A local WordPress installation | ||
|
||
You can use [the tools to set your local WordPress environment](https://developer.wordpress.org/block-editor/getting-started/devenv/#wordpress-development-site) you feel more comfortable with. | ||
|
||
To get quickly started, [`wp-now`](https://www.npmjs.com/package/@wp-now/wp-now) is the easiest way to get a WordPress site up and running locally. | ||
|
||
### Latest vesion of Gutenberg (v16.2 or superior) | ||
|
||
The Interactivity API is currently only available as an experimental feature from Gutenberg 16.2, so you'll need to have the latest version of the Gutenberg plugin (or at least v16.2) installed and activated in your WordPress installation. | ||
|
||
### Node | ||
|
||
Block development requires [Node](https://nodejs.org/en), so you'll need to have Node installed and running on your machine. Any version should work, but please check the minimum version requirements if you run into any issues with any of the Node.js tools used in WordPress development. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
# Interactivity API Docs | ||
|
||
👋 Hi! Welcome to the Interactivity API documentation. | ||
|
||
## Quick start | ||
|
||
The best place to start with the Interactivity API is this [**Getting started guide**](1-getting-started.md). There you'll will find a very quick start guide and the current requirements of the Interactivity API. | ||
|
||
|
||
## Take a deep dive | ||
|
||
<!-- Links to get the details (API, architecture, resources...) --> | ||
|
||
## Get Involved | ||
|
||
<!-- Links to get involved --> | ||
|
||
## License | ||
|
||
<!-- License? --> | ||
|
||
<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p> |