-
Notifications
You must be signed in to change notification settings - Fork 86
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
Block: Improve in file documentation to make it easier to edit content #107
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,70 @@ | ||
( function( wp ) { | ||
var registerBlockType = wp.blocks.registerBlockType; | ||
var el = wp.element.createElement; | ||
var __ = wp.i18n.__; | ||
|
||
// Visit https://wordpress.org/gutenberg/handbook/block-api/ to learn about Block API | ||
wp.blocks.registerBlockType( '{{namespace}}/{{slug}}', { | ||
title: __( '{{title_ucfirst}}', '{{textdomain}}' ), | ||
/** | ||
* Every block starts by registering a new block type definition. | ||
* The function takes two arguments, a block name and a block configuration object. | ||
* @see https://wordpress.org/gutenberg/handbook/block-api/ | ||
*/ | ||
registerBlockType( '{{namespace}}/{{slug}}', { | ||
/** | ||
* This is the display title for your block, which can be translated with `i18n` functions. | ||
* The block inserter will show this name. | ||
*/ | ||
title: __( '{{title_ucfirst}}' ), | ||
|
||
{{#dashicon}} | ||
/** | ||
* An icon property should be specified to make it easier to identify a block. | ||
* These can be any of WordPress’ Dashicons, or a custom svg element. | ||
*/ | ||
icon: '{{dashicon}}', | ||
|
||
{{/dashicon}} | ||
/** | ||
* Blocks are grouped into categories to help users browse and discover them. | ||
* The core provided categories are `common`, `embed`, `formatting`, `layout` and `widgets`. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems grammatically off to me. Depending on the intended meaning, I'd suggest either of these two:
|
||
*/ | ||
category: '{{category}}', | ||
|
||
// Remove to make block editable in HTML mode. | ||
supportHTML: false, | ||
/** | ||
* Optional block extended support features. | ||
*/ | ||
supports: { | ||
// Removes support for an HTML mode. | ||
html: false, | ||
}, | ||
|
||
/** | ||
* The edit function describes the structure of your block in the context of the editor. | ||
* This represents what the editor will render when the block is used. | ||
* @see https://wordpress.org/gutenberg/handbook/block-edit-save/#edit | ||
* | ||
* @param {Object} [props] Properties passed from the editor. | ||
* @return {Element} Element to render. | ||
*/ | ||
edit: function( props ) { | ||
return el( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. As this scaffolding serves as an onboarding tool as well, it would be useful to also document what the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
'p', | ||
{ className: props.className }, | ||
__( 'Replace with your content!', '{{textdomain}}' ) | ||
__( 'Hello from the editor!' ) | ||
); | ||
}, | ||
|
||
/** | ||
* The save function defines the way in which the different attributes should be combined | ||
* into the final markup, which is then serialized by Gutenberg into `post_content`. | ||
* @see https://wordpress.org/gutenberg/handbook/block-edit-save/#save | ||
* | ||
* @return {Element} Element to render. | ||
*/ | ||
save: function() { | ||
return el( | ||
'p', | ||
{}, | ||
__( 'Replace with your content!', '{{textdomain}}' ) | ||
__( 'Hello from the saved content!' ) | ||
); | ||
} | ||
} ); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,9 @@ | ||
/** | ||
* The following styles get applied inside the editor only. | ||
* | ||
* Replace them with your own styles or remove the file completely. | ||
*/ | ||
|
||
.wp-block-{{namespace}}-{{slug}} { | ||
/* Replace with your styles. */ | ||
background-color: #000; | ||
color: #fff; | ||
border: 1px dotted #f00; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,54 @@ | ||
<?php | ||
/** | ||
* Functions to register client-side assets (scripts and stylesheets) for the Gutenberg block. | ||
* | ||
* @package {{namespace}} | ||
*/ | ||
|
||
/** | ||
* Enqueues block assets to apply inside the editor only. | ||
*/ | ||
function {{machine_name}}_enqueue_block_editor_assets() { | ||
$dir = dirname( __FILE__ ); | ||
|
||
$block_js = '{{slug}}/block.js'; | ||
wp_enqueue_script( | ||
'{{slug}}-block-editor', | ||
plugins_url( $block_js, __FILE__ ), | ||
array( | ||
'wp-blocks', | ||
'wp-i18n', | ||
'wp-element', | ||
), | ||
filemtime( "$dir/$block_js" ) | ||
); | ||
|
||
$editor_css = '{{slug}}/editor.css'; | ||
wp_enqueue_script( '{{slug}}-block', plugins_url( $block_js, __FILE__ ), array( | ||
'wp-blocks', | ||
'wp-i18n', | ||
'wp-element', | ||
), filemtime( "$dir/$block_js" ) ); | ||
wp_enqueue_style( '{{slug}}-block', plugins_url( $editor_css, __FILE__ ), array( | ||
'wp-blocks', | ||
), filemtime( "$dir/$editor_css" ) ); | ||
wp_enqueue_style( | ||
'{{slug}}-block-editor', | ||
plugins_url( $editor_css, __FILE__ ), | ||
array( | ||
'wp-blocks', | ||
), | ||
filemtime( "$dir/$editor_css" ) | ||
); | ||
} | ||
add_action( 'enqueue_block_editor_assets', '{{machine_name}}_enqueue_block_editor_assets' ); | ||
|
||
/** | ||
* Enqueues block assets to apply both on the front of your site and in the editor. | ||
*/ | ||
function {{machine_name}}_enqueue_block_assets() { | ||
$dir = dirname( __FILE__ ); | ||
|
||
$style_css = '{{slug}}/style.css'; | ||
wp_enqueue_style( | ||
'{{slug}}-block', | ||
plugins_url( $style_css, __FILE__ ), | ||
array( | ||
'wp-blocks', | ||
), | ||
filemtime( "$dir/$style_css" ) | ||
); | ||
} | ||
add_action( 'enqueue_block_assets', '{{machine_name}}_enqueue_block_assets' ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
/** | ||
* The following styles get applied both on the front of your site and in the editor. | ||
* | ||
* Replace them with your own styles or remove the file completely. | ||
*/ | ||
|
||
.wp-block-{{namespace}}-{{slug}} { | ||
background-color: #000; | ||
color: #fff; | ||
padding: 2px; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
2 tests are failing, need to be updated.
2 more tests need to verify if
style.css
file was created.