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

Add initial scaffold block command #96

Merged
merged 5 commits into from Nov 28, 2017

Conversation

@gziolo
Contributor

gziolo commented Nov 23, 2017

Related issue: #88.

This PR implements a scaffolding command dedicated to Gutenberg blocks. It's a first iteration which is focused on a very basic static block which can't be edited in Gutenberg. In the follow-up PR we can cover more advanced examples like a dynamic block or server-side rendered block using Post meta.

To use the generated code you need to require php file inside your plugin or theme, depending which option you pick.

You can learn more about writing blocks in this article and in the official documentation.

Example usage

Commands should be executed from the WordPress folder or with --path option.

wp scaffold block my-block --theme

wp scaffold block my-another-block --plugin=my-plugin-name --category=widget

wp scaffold block my-yet-another-block --theme --dashicon=editor-paragraph

Example output

Command: wp scaffold block movie --title="movie block" --theme

wordpress/wp-content/themes/twentyseventeen/blocks/movie.php:

<?php

function movie_enqueue_block_editor_assets() {
	$dir = dirname( __FILE__ );
	$block_js = 'movie/block.js';
	$editor_css = 'movie/editor.css';
	wp_enqueue_script( 'movie-block', plugins_url( $block_js, __FILE__ ), array(
		'wp-blocks',
		'wp-i18n',
		'wp-element',
	), filemtime( "$dir/$block_js" ) );
	wp_enqueue_style( 'movie-block', plugins_url( $editor_css, __FILE__ ), array(
		'wp-blocks',
	), filemtime( "$dir/$editor_css" ) );
}
add_action( 'enqueue_block_editor_assets', 'movie_enqueue_block_editor_assets' );

wordpress/wp-content/themes/twentyseventeen/blocks/movie/block.js:

( function( wp ) {
	var el = wp.element.createElement;
	var __ = wp.i18n.__;

	// Visit https://wordpress.org/gutenberg/handbook/block-api/ to learn about Block API
	wp.blocks.registerBlockType( 'twentyseventeen/movie', {
		title: __( 'Movie block', 'twentyseventeen' ),

		category: 'widgets',

		// Remove to make block editable in HTML mode.
		supportHTML: false,

		edit: function( props ) {
			return el(
				'p',
				{ className: props.className },
				__( 'Replace with your content!', 'twentyseventeen' )
			);
		},

		save: function() {
			return el(
				'p',
				{},
				__( 'Replace with your content!', 'twentyseventeen' )
			);
		}
	} );
} )(
	window.wp
);

wordpress/wp-content/themes/twentyseventeen/blocks/movie/editor.css:

.wp-block-twentyseventeen-movie {
	/* Replace with your styles. */
	background-color: #000;
	color: #fff;
}

Commands that produce errors

wp scaffold block MyBlock

Error: Invalid block slug specified. Block slugs can contain only lowercase alphanumeric characters or dashes, and start with a letter.

wp scaffold block my-block

Error: No plugin or theme selected.

wp scaffold block my-block --category=unknown

Error: Invalid block category specified. Block categories need to match one of the registered values.

wp scaffold block movie --title=Movie --theme=simple-life

Error: Can't find 'simple-life' theme.

wp scaffold block movie --title=Movie --plugin=simple-life

Error: Can't find 'simple-life' plugin.

TODO

  • Functional tests
  • Documentation updates

Block examples:

@danielbachhuber

👍 Looks like a great start! I've left some inline comments.

Show outdated Hide outdated src/Scaffold_Command.php Outdated
Show outdated Hide outdated src/Scaffold_Command.php Outdated
Show outdated Hide outdated src/Scaffold_Command.php Outdated
Show outdated Hide outdated src/Scaffold_Command.php Outdated
Show outdated Hide outdated src/Scaffold_Command.php Outdated
Show outdated Hide outdated templates/block-js.mustache Outdated
* : The dashicon to make it easier to identify your block.
*
* [--category=<category>]
* : The category name to help users browse and discover your block.

This comment has been minimized.

@danielbachhuber

danielbachhuber Nov 27, 2017

Member

Could/should this category impact scaffolded code?

@danielbachhuber

danielbachhuber Nov 27, 2017

Member

Could/should this category impact scaffolded code?

This comment has been minimized.

@gziolo

gziolo Nov 27, 2017

Contributor
@@ -201,6 +200,106 @@ private function _scaffold( $slug, $assoc_args, $defaults, $subdir, $templates )
}
}
/**
* Generate PHP, JS and CSS code for registering a custom block.
*

This comment has been minimized.

@danielbachhuber

danielbachhuber Nov 27, 2017

Member

Would this benefit from a longer explanation of what a block is, etc.?

@danielbachhuber

danielbachhuber Nov 27, 2017

Member

Would this benefit from a longer explanation of what a block is, etc.?

This comment has been minimized.

@gziolo

gziolo Nov 28, 2017

Contributor

Added.

@gziolo

gziolo Nov 28, 2017

Contributor

Added.

Show outdated Hide outdated templates/block-php.mustache Outdated
Show outdated Hide outdated templates/block-js.mustache Outdated
@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Nov 27, 2017

Contributor

@danielbachhuber for your feedback, I will update PR tomorrow.

Contributor

gziolo commented Nov 27, 2017

@danielbachhuber for your feedback, I will update PR tomorrow.

Show outdated Hide outdated src/Scaffold_Command.php Outdated
@gziolo

This comment has been minimized.

Show comment
Hide comment
@gziolo

gziolo Nov 28, 2017

Contributor

@danielbachhuber I addressed your comments, added documentation, and functional tests. It's ready for another look.

Contributor

gziolo commented Nov 28, 2017

@danielbachhuber I addressed your comments, added documentation, and functional tests. It's ready for another look.

Success: Created block 'Movie block'.
Generate PHP code for registering a custom taxonomy.

This comment has been minimized.

@danielbachhuber
@danielbachhuber

danielbachhuber Nov 28, 2017

Member

Good.

@danielbachhuber danielbachhuber added this to the 1.1 milestone Nov 28, 2017

@danielbachhuber danielbachhuber changed the title from [WIP] Add initial scaffold block command to Add initial scaffold block command Nov 28, 2017

@danielbachhuber danielbachhuber merged commit f174112 into wp-cli:master Nov 28, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@gziolo gziolo deleted the gziolo:add/scaffold-block branch Nov 28, 2017

@swissspidy swissspidy referenced this pull request Dec 12, 2017

Open

Gutenberg Integration #46

// Visit https://wordpress.org/gutenberg/handbook/block-api/ to learn about Block API
wp.blocks.registerBlockType( '{{namespace}}/{{slug}}', {
title: __( '{{title_ucfirst}}', '{{textdomain}}' ),

This comment has been minimized.

@grappler

grappler Jan 30, 2018

@gziolo This does not seem to be the correct way of defining the textdomain. https://github.com/WordPress/gutenberg/tree/master/i18n

I don't think there is any proper way of defining the text domain WordPress/gutenberg#4147

@grappler

grappler Jan 30, 2018

@gziolo This does not seem to be the correct way of defining the textdomain. https://github.com/WordPress/gutenberg/tree/master/i18n

I don't think there is any proper way of defining the text domain WordPress/gutenberg#4147

This comment has been minimized.

@schlessera

schlessera Jan 30, 2018

Member

This was fixed after this PR got merged in c74032f

@schlessera

schlessera Jan 30, 2018

Member

This was fixed after this PR got merged in c74032f

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment