Skip to content

Commit

Permalink
Gutenberg: Enable Jetpack blocks by default (#10292)
Browse files Browse the repository at this point in the history
* Enable local Jetpack Gutenberg by default

* Update relevant documentation and docblocks
  • Loading branch information
sirreal authored Oct 15, 2018
1 parent 508c40e commit 08d3ac7
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 55 deletions.
30 changes: 11 additions & 19 deletions class.jetpack.php
Original file line number Diff line number Diff line change
Expand Up @@ -7274,17 +7274,8 @@ public static function is_gutenberg_available() {
/**
* Load Gutenberg editor blocks.
*
* This section meant for unstable phase of developing Jetpack's
* Gutenberg extensions. If still around after Sep. 15, 2018 then
* please file an issue to remove it; if nobody responds within one
* week then please delete the code.
*
*
* Loading blocks is disabled by default and enabled via filter:
* add_filter( 'jetpack_gutenberg', '__return_true' );
*
* When enabled, blocks are loaded from CDN by default. To load locally instead:
* add_filter( 'jetpack_gutenberg_cdn', '__return_false' );
* Loading blocks is enabled by default and may be disabled via filter:
* add_filter( 'jetpack_gutenberg', '__return_false' );
*
* Note that when loaded locally, you need to build the files yourself:
* - _inc/blocks/editor.js
Expand All @@ -7302,17 +7293,18 @@ public static function is_gutenberg_available() {
* @return void
*/
public static function load_jetpack_gutenberg() {
if ( ! Jetpack::is_active() ) {
return;
}

/**
* Filter to turn on loading Gutenberg blocks
* Filter to disable Gutenberg blocks
*
* @since 6.5.0
*
* @param bool false Whether to load Gutenberg blocks
* @param bool true Whether to load Gutenberg blocks
*/
if ( ! Jetpack::is_active() ) {
return;
}
if ( ! Jetpack::is_gutenberg_available() || ! apply_filters( 'jetpack_gutenberg', false ) ) {
if ( ! Jetpack::is_gutenberg_available() || ! apply_filters( 'jetpack_gutenberg', true ) ) {
return;
}

Expand All @@ -7323,9 +7315,9 @@ public static function load_jetpack_gutenberg() {
*
* @since 6.5.0
*
* @param bool true Whether to load Gutenberg blocks from CDN
* @param bool false Whether to load Gutenberg blocks from CDN
*/
if ( apply_filters( 'jetpack_gutenberg_cdn', true ) ) {
if ( apply_filters( 'jetpack_gutenberg_cdn', false ) ) {
$cdn_base = 'https://s0.wp.com/wp-content/mu-plugins/jetpack/_inc/blocks';
$editor_script = "$cdn_base/editor.js";
$editor_style = "$cdn_base/editor$rtl.css";
Expand Down
57 changes: 21 additions & 36 deletions docs/guides/gutenberg-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,15 @@

_Note: Since the Gutenberg SDK is still being actively developed, the development workflow described here is subject to frequent change (as of October 2018). Notably, we're currently working on a different (lerna and npm based) deploy workflow. Be sure to check back frequently!_

1. Install & activate the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/).
1. Install & activate the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/).

If you use Jetpack-Docker, you can use WP-CLI:

```bash
yarn docker:wp plugin install gutenberg --activate
```

1. In Jetpack, enable loading block assets by adding following filters to your local mu-plugins folder:

```php
add_filter( 'jetpack_gutenberg', '__return_true', 10 );
add_filter( 'jetpack_gutenberg_cdn', '__return_false', 10 );
```

If you use Jetpack-Docker, you could add these to `docker/mu-plugins/0-custom.php`

Setting these might be useful for debugging:

```php
define( 'SCRIPT_DEBUG', true );
define( 'GUTENBERG_DEVELOPMENT_MODE', true );
```

If you use Jetpack-Docker, you could add these to `docker/wordpress/wp-config.php`

Those filters take action here: https://github.com/Automattic/jetpack/blob/b4a057fad975f3db8097fd62e702e276fd3d4389/class.jetpack.php#L7272-L7381

1. Jetpack will now load these files when editing posts in Gutenberg:
1. Jetpack will now load these files when editing posts in Gutenberg:

```
_inc/blocks/editor.css
Expand All @@ -41,23 +21,15 @@ _Note: Since the Gutenberg SDK is still being actively developed, the developmen
_inc/blocks/view.js
```

Without setting `jetpack_gutenberg_cdn` to false, Jetpack would load these assets from CDN with 24h cache buster:
Note that we currently have a fixed list of dependencies block dependencies:

https://s0.wp.com/wp-content/mu-plugins/jetpack/_inc/blocks/

This is great for letting team-outsiders test our current set of Jetpack blocks; let's deploy these when ever we have something to show.
Use the helper script introduced in D18479-code to produce these assets locally for your sandbox so that you can then commit and deploy.
Note that we currently have a fixed list of dependencies which is just everything current trial blocks depend on: https://github.com/Automattic/jetpack/blob/b4a057fad975f3db8097fd62e702e276fd3d4389/class.jetpack.php#L7355-L7366
https://github.com/Automattic/jetpack/blob/b4a057fad975f3db8097fd62e702e276fd3d4389/class.jetpack.php#L7355-L7366

We don't have a mechanism in SDK to export these during compile time.
1. (optional) To run SDK CLI commands from anywhere in file system, type `npm link` in Calypso folder. You now have `calypso-sdk` command available.

1. The source for Jetpack blocks lives in the Calypso repository: https://github.com/Automattic/wp-calypso/tree/96b2d6a64f3d65fbadfbbf707d0d1cdaa23b942f/client/gutenberg/extensions
Bundled Jetpack blocks should be added to the corresponding [`jetpack` presets](https://github.com/Automattic/wp-calypso/tree/master/client/gutenberg/extensions/presets/jetpack).
Bundled Jetpack blocks should be added to the corresponding [Jetpack preset](https://github.com/Automattic/wp-calypso/tree/master/client/gutenberg/extensions/presets/jetpack).
The SDK supports building code from external sources so you don't necessarily have to commit to Calypso until to the point you want to share your work.

Expand All @@ -66,7 +38,7 @@ _Note: Since the Gutenberg SDK is still being actively developed, the developmen
```bash
npm run sdk -- gutenberg \
client/gutenberg/extensions/hello-dolly/ \
--output-dir=~/path/to/jetpack/_inc/blocks \
--output-dir=/path/to/jetpack/_inc/blocks \
--watch
```

Expand All @@ -86,7 +58,20 @@ _Note: Since the Gutenberg SDK is still being actively developed, the developmen

If you use the paid version, this will allow you to have your own URL that you can use consistently, without having to reconnect.

## Suggestions

* Setting these might be useful for debugging:

```php
define( 'SCRIPT_DEBUG', true );
define( 'GUTENBERG_DEVELOPMENT_MODE', true );
```

If you use Jetpack-Docker, you could add these to `docker/wordpress/wp-config.php`

* To run SDK CLI commands from anywhere in file system, type `npm link` in Calypso folder. You now have `calypso-sdk` command available.

## Other Resources

- SDK documentation: https://wpcalypso.wordpress.com/devdocs/docs/sdk.md
- Jetpack Docker documentation: https://github.com/Automattic/jetpack/tree/master/docker#readme
- Jetpack Docker documentation: https://github.com/Automattic/jetpack/tree/master/docker#readme

0 comments on commit 08d3ac7

Please sign in to comment.