From 197b59e247a3b54012fd0db2f370cc8d9d874565 Mon Sep 17 00:00:00 2001 From: intelijens Date: Fri, 12 Jun 2020 21:06:47 -0700 Subject: [PATCH 1/5] add/controls-template-esnext - initial commit; clone exnext default sample --- .../controls-esnext/$slug.php.mustache | 68 ++++++++++++++++ .../controls-esnext/.editorconfig.mustache | 21 +++++ .../controls-esnext/.gitignore.mustache | 27 +++++++ .../controls-esnext/editor.css.mustache | 9 +++ .../controls-esnext/readme.txt.mustache | 63 +++++++++++++++ .../controls-esnext/src/edit.js.mustache | 24 ++++++ .../controls-esnext/src/index.js.mustache | 78 +++++++++++++++++++ .../controls-esnext/src/save.js.mustache | 26 +++++++ .../controls-esnext/style.css.mustache | 12 +++ 9 files changed, 328 insertions(+) create mode 100644 packages/create-block/lib/templates/controls-esnext/$slug.php.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/.editorconfig.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/.gitignore.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/editor.css.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/readme.txt.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/src/index.js.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/src/save.js.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/style.css.mustache diff --git a/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache b/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache new file mode 100644 index 00000000000000..e5f30dfffa15a4 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache @@ -0,0 +1,68 @@ + '{{namespace}}-{{slug}}-block-editor', + 'editor_style' => '{{namespace}}-{{slug}}-block-editor', + 'style' => '{{namespace}}-{{slug}}-block', + ) ); +} +add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' ); diff --git a/packages/create-block/lib/templates/controls-esnext/.editorconfig.mustache b/packages/create-block/lib/templates/controls-esnext/.editorconfig.mustache new file mode 100644 index 00000000000000..a541e47e767bca --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/.editorconfig.mustache @@ -0,0 +1,21 @@ +# This file is for unifying the coding style for different editors and IDEs +# editorconfig.org + +# WordPress Coding Standards +# https://make.wordpress.org/core/handbook/coding-standards/ + +root = true + +[*] +charset = utf-8 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true +indent_style = tab + +[*.yml] +indent_style = space +indent_size = 2 + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/create-block/lib/templates/controls-esnext/.gitignore.mustache b/packages/create-block/lib/templates/controls-esnext/.gitignore.mustache new file mode 100644 index 00000000000000..7e8c9eac7c4416 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/.gitignore.mustache @@ -0,0 +1,27 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Coverage directory used by tools like istanbul +coverage + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Output of 'npm pack' +*.tgz + +# dotenv environment variables file +.env diff --git a/packages/create-block/lib/templates/controls-esnext/editor.css.mustache b/packages/create-block/lib/templates/controls-esnext/editor.css.mustache new file mode 100644 index 00000000000000..fc68223e006607 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/editor.css.mustache @@ -0,0 +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}} { + border: 1px dotted #f00; +} diff --git a/packages/create-block/lib/templates/controls-esnext/readme.txt.mustache b/packages/create-block/lib/templates/controls-esnext/readme.txt.mustache new file mode 100644 index 00000000000000..763e27bca5d91e --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/readme.txt.mustache @@ -0,0 +1,63 @@ +=== {{title}} === +{{#author}} +Contributors: {{author}} +{{/author}} +Tags: block +Requires at least: 5.3.2 +Tested up to: 5.4.1 +Stable tag: {{version}} +Requires PHP: 7.0.0 +{{#license}} +License: {{license}} +{{/license}} +{{#licenseURI}} +License URI: {{{licenseURI}}} +{{/licenseURI}} + +{{description}} + +== Description == + +This is the long description. No limit, and you can use Markdown (as well as in the following sections). + +For backwards compatibility, if this section is missing, the full length of the short description will be used, and +Markdown parsed. + +== Installation == + +This section describes how to install the plugin and get it working. + +e.g. + +1. Upload the plugin files to the `/wp-content/plugins/{{slug}}` directory, or install the plugin through the WordPress plugins screen directly. +1. Activate the plugin through the 'Plugins' screen in WordPress + + +== Frequently Asked Questions == + += A question that someone might have = + +An answer to that question. + += What about foo bar? = + +Answer to foo bar dilemma. + +== Screenshots == + +1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from +the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets +directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png` +(or jpg, jpeg, gif). +2. This is the second screen shot + +== Changelog == + += {{version}} = +* Release + +== Arbitrary section == + +You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated +plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or +"installation." Arbitrary sections will be shown below the built-in sections outlined above. diff --git a/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache new file mode 100644 index 00000000000000..caea5d2571ee75 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache @@ -0,0 +1,24 @@ +/** + * Retrieves the translation of text. + * + * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ + */ +import { __ } from '@wordpress/i18n'; + +/** + * 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://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit + * + * @param {Object} [props] Properties passed from the editor. + * + * @return {WPElement} Element to render. + */ +export default function Edit( { className } ) { + return ( +

+ { __( '{{title}} – hello from the editor!', '{{textdomain}}' ) } +

+ ); +} diff --git a/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache new file mode 100644 index 00000000000000..7cc26fbc0c9295 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache @@ -0,0 +1,78 @@ +/** + * Registers a new block provided a unique name and an object defining its behavior. + * + * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Retrieves the translation of text. + * + * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import save from './save'; + +/** + * Every block starts by registering a new block type definition. + * + * @see https://developer.wordpress.org/block-editor/developers/block-api/#registering-a-block + */ +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}}', + '{{textdomain}}' + ), + + {{#description}} + /** + * This is a short description for your block, can be translated with `i18n` functions. + * It will be shown in the Block Tab in the Settings Sidebar. + */ + description: __( + '{{description}}', + '{{textdomain}}' + ), + + {{/description}} + /** + * Blocks are grouped into categories to help users browse and discover them. + * The categories provided by core are `common`, `embed`, `formatting`, `layout` and `widgets`. + */ + category: '{{category}}', + + {{#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}} + /** + * Optional block extended support features. + */ + supports: { + // Removes support for an HTML mode. + html: false, + }, + + /** + * @see ./edit.js + */ + edit: Edit, + + /** + * @see ./save.js + */ + save, +} ); diff --git a/packages/create-block/lib/templates/controls-esnext/src/save.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/save.js.mustache new file mode 100644 index 00000000000000..403eb2f1965553 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/src/save.js.mustache @@ -0,0 +1,26 @@ +/** + * Retrieves the translation of text. + * + * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ + */ +import { __ } from '@wordpress/i18n'; + +/** + * The save function defines the way in which the different attributes should + * be combined into the final markup, which is then serialized by the block + * editor into `post_content`. + * + * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save + * + * @return {WPElement} Element to render. + */ +export default function save() { + return ( +

+ { __( + '{{title}} – hello from the saved content!', + '{{textdomain}}' + ) } +

+ ); +} diff --git a/packages/create-block/lib/templates/controls-esnext/style.css.mustache b/packages/create-block/lib/templates/controls-esnext/style.css.mustache new file mode 100644 index 00000000000000..76b12185cee079 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/style.css.mustache @@ -0,0 +1,12 @@ +/** + * 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; +} From 9010591a10dc0440f585b948ee2866e26abfc7f0 Mon Sep 17 00:00:00 2001 From: intelijens Date: Fri, 12 Jun 2020 21:28:07 -0700 Subject: [PATCH 2/5] add/controls-template-esnext - update sample from wp/gutenberg master --- .../lib/templates/controls-esnext/$slug.php.mustache | 4 ++-- .../lib/templates/controls-esnext/src/edit.js.mustache | 8 ++++++++ .../{editor.css.mustache => src/editor.scss.mustache} | 2 +- .../lib/templates/controls-esnext/src/index.js.mustache | 9 +++++++++ .../{style.css.mustache => src/style.scss.mustache} | 4 ++-- 5 files changed, 22 insertions(+), 5 deletions(-) rename packages/create-block/lib/templates/controls-esnext/{editor.css.mustache => src/editor.scss.mustache} (87%) rename packages/create-block/lib/templates/controls-esnext/{style.css.mustache => src/style.scss.mustache} (81%) diff --git a/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache b/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache index e5f30dfffa15a4..cc68e732494963 100644 --- a/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache +++ b/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache @@ -43,7 +43,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { $script_asset['version'] ); - $editor_css = 'editor.css'; + $editor_css = 'build/index.css'; wp_register_style( '{{namespace}}-{{slug}}-block-editor', plugins_url( $editor_css, __FILE__ ), @@ -51,7 +51,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { filemtime( "$dir/$editor_css" ) ); - $style_css = 'style.css'; + $style_css = 'build/style.css'; wp_register_style( '{{namespace}}-{{slug}}-block', plugins_url( $style_css, __FILE__ ), diff --git a/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache index caea5d2571ee75..4a34d7ce232de9 100644 --- a/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache +++ b/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache @@ -5,6 +5,14 @@ */ import { __ } from '@wordpress/i18n'; +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * Those files can contain any CSS code that gets applied to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './editor.scss'; + /** * 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. diff --git a/packages/create-block/lib/templates/controls-esnext/editor.css.mustache b/packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache similarity index 87% rename from packages/create-block/lib/templates/controls-esnext/editor.css.mustache rename to packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache index fc68223e006607..0f0c68b4cf4885 100644 --- a/packages/create-block/lib/templates/controls-esnext/editor.css.mustache +++ b/packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache @@ -5,5 +5,5 @@ */ .wp-block-{{namespace}}-{{slug}} { - border: 1px dotted #f00; + border: 1px dotted red; } diff --git a/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache index 7cc26fbc0c9295..ef9236403bbf21 100644 --- a/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache +++ b/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache @@ -12,6 +12,15 @@ import { registerBlockType } from '@wordpress/blocks'; */ import { __ } from '@wordpress/i18n'; +/** + * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. + * All files containing `style` keyword are bundled together. The code used + * gets applied both to the front of your site and to the editor. + * + * @see https://www.npmjs.com/package/@wordpress/scripts#using-css + */ +import './style.scss'; + /** * Internal dependencies */ diff --git a/packages/create-block/lib/templates/controls-esnext/style.css.mustache b/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache similarity index 81% rename from packages/create-block/lib/templates/controls-esnext/style.css.mustache rename to packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache index 76b12185cee079..3e1dc0a2b35043 100644 --- a/packages/create-block/lib/templates/controls-esnext/style.css.mustache +++ b/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache @@ -6,7 +6,7 @@ */ .wp-block-{{namespace}}-{{slug}} { - background-color: #000; - color: #fff; + background-color: theme(button); + color: white; padding: 2px; } From 44058cec683eb278669e26e1d9ede71e597dcae6 Mon Sep 17 00:00:00 2001 From: intelijens Date: Sat, 13 Jun 2020 00:24:29 -0700 Subject: [PATCH 3/5] add/controls-template-esnext - update to match https://github.com/WordPress/gutenberg-examples/tree/master/04-controls-esnext sample --- packages/create-block/lib/templates.js | 12 +++ .../controls-esnext/src/index.js.mustache | 95 ++++++++++++++----- .../controls-esnext/src/style.scss.mustache | 30 +++--- 3 files changed, 103 insertions(+), 34 deletions(-) diff --git a/packages/create-block/lib/templates.js b/packages/create-block/lib/templates.js index 683f9e3b3855b0..6a7659a8284e68 100644 --- a/packages/create-block/lib/templates.js +++ b/packages/create-block/lib/templates.js @@ -30,6 +30,18 @@ const predefinedBlockTemplates = { 'Example block written with ESNext standard and JSX support – build step required.', }, }, + 'controls-esnext': { + defaultValues: { + namespace: 'gutenberg-examples', + slug: 'example-04-controls-esnext', + title: 'Example: Controls (ESNext)', + textdomain: 'gutenberg-examples', + description: + 'Example block written with ESNext standard and JSX support for GUI Controls– build step required.', + dashicon: 'universal-access-alt', + category: 'layout', + }, + }, }; const getOutputTemplates = async ( name ) => { diff --git a/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache index ef9236403bbf21..4a61303faef6ae 100644 --- a/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache +++ b/packages/create-block/lib/templates/controls-esnext/src/index.js.mustache @@ -13,19 +13,13 @@ import { registerBlockType } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; /** - * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. - * All files containing `style` keyword are bundled together. The code used - * gets applied both to the front of your site and to the editor. - * - * @see https://www.npmjs.com/package/@wordpress/scripts#using-css - */ -import './style.scss'; - -/** - * Internal dependencies + * Editor imports */ -import Edit from './edit'; -import save from './save'; +import { + RichText, + AlignmentToolbar, + BlockControls, +} from '@wordpress/block-editor'; /** * Every block starts by registering a new block type definition. @@ -59,6 +53,21 @@ registerBlockType( '{{namespace}}/{{slug}}', { */ category: '{{category}}', + /** + * Attributes used in functions + */ + attributes: { + content: { + type: 'array', + source: 'children', + selector: 'p', + }, + alignment: { + type: 'string', + default: 'none', + }, + }, + {{#dashicon}} /** * An icon property should be specified to make it easier to identify a block. @@ -67,21 +76,61 @@ registerBlockType( '{{namespace}}/{{slug}}', { icon: '{{dashicon}}', {{/dashicon}} - /** - * Optional block extended support features. - */ - supports: { - // Removes support for an HTML mode. - html: false, - }, /** - * @see ./edit.js + * Edit function + * + * @param {obj} props */ - edit: Edit, + edit: ( props ) => { + const { + attributes: { content, alignment }, + className, + } = props; + + const onChangeContent = ( newContent ) => { + props.setAttributes( { content: newContent } ); + }; + + const onChangeAlignment = ( newAlignment ) => { + props.setAttributes( { + alignment: newAlignment === undefined ? 'none' : newAlignment, + } ); + }; + + return ( +
+ { + + + + } + +
+ ); + }, /** - * @see ./save.js + * Save function + * + * @param {obj} props */ - save, + save: ( props ) => { + return ( + + ); + }, } ); diff --git a/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache b/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache index 3e1dc0a2b35043..7ae84ceb49ac02 100644 --- a/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache +++ b/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache @@ -1,12 +1,20 @@ -/** - * 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: theme(button); - color: white; - padding: 2px; + +.wp-block-gutenberg-examples-example-04-controls-esnext { + color: #fff; + background: #00a8db; + border: 2px solid #0D72B2; + padding: 20px; + font-family: sans-serif; +} + +.gutenberg-examples-align-left { + text-align: left; } + +.gutenberg-examples-align-center { + text-align: center; +} + +.gutenberg-examples-align-right { + text-align: right; +} \ No newline at end of file From 0c7757b61cfe228acb5d802209b29d01ac2e0ab7 Mon Sep 17 00:00:00 2001 From: intelijens Date: Sat, 20 Jun 2020 01:06:40 -0700 Subject: [PATCH 4/5] add/controls-template-esnext - reverted edits from commit 9010591; removed unneeded import js; add back in the scss to the template block folder; prevent missing css error; all of this will likely change with gutenberg and create block update; adjusted background colors for editor view and client view to easily distinguish block is active --- .../controls-esnext/$slug.php.mustache | 4 +-- .../controls-esnext/editor.css.mustache | 18 +++++++++++ .../controls-esnext/src/edit.js.mustache | 32 ------------------- .../controls-esnext/src/editor.scss.mustache | 9 ------ .../controls-esnext/src/save.js.mustache | 26 --------------- .../controls-esnext/src/style.scss.mustache | 20 ------------ .../controls-esnext/style.css.mustache | 30 +++++++++++++++++ .../lib/templates/esnext/$slug.php.mustache | 16 ---------- 8 files changed, 50 insertions(+), 105 deletions(-) create mode 100644 packages/create-block/lib/templates/controls-esnext/editor.css.mustache delete mode 100644 packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache delete mode 100644 packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache delete mode 100644 packages/create-block/lib/templates/controls-esnext/src/save.js.mustache delete mode 100644 packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache create mode 100644 packages/create-block/lib/templates/controls-esnext/style.css.mustache diff --git a/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache b/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache index cc68e732494963..e5f30dfffa15a4 100644 --- a/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache +++ b/packages/create-block/lib/templates/controls-esnext/$slug.php.mustache @@ -43,7 +43,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { $script_asset['version'] ); - $editor_css = 'build/index.css'; + $editor_css = 'editor.css'; wp_register_style( '{{namespace}}-{{slug}}-block-editor', plugins_url( $editor_css, __FILE__ ), @@ -51,7 +51,7 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { filemtime( "$dir/$editor_css" ) ); - $style_css = 'build/style.css'; + $style_css = 'style.css'; wp_register_style( '{{namespace}}-{{slug}}-block', plugins_url( $style_css, __FILE__ ), diff --git a/packages/create-block/lib/templates/controls-esnext/editor.css.mustache b/packages/create-block/lib/templates/controls-esnext/editor.css.mustache new file mode 100644 index 00000000000000..882269f99c35ec --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/editor.css.mustache @@ -0,0 +1,18 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +/** + * Note that these styles are loaded *after* common styles, so that + * editor-specific styles using the same selectors will take precedence. + */ + +.wp-block-{{namespace}}-{{slug}} { + color: #fff; + background: #00a8db; + border: 2px solid #0D72B2; + padding: 20px; + font-family: sans-serif; +} \ No newline at end of file diff --git a/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache deleted file mode 100644 index 4a34d7ce232de9..00000000000000 --- a/packages/create-block/lib/templates/controls-esnext/src/edit.js.mustache +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Retrieves the translation of text. - * - * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ - */ -import { __ } from '@wordpress/i18n'; - -/** - * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. - * Those files can contain any CSS code that gets applied to the editor. - * - * @see https://www.npmjs.com/package/@wordpress/scripts#using-css - */ -import './editor.scss'; - -/** - * 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://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit - * - * @param {Object} [props] Properties passed from the editor. - * - * @return {WPElement} Element to render. - */ -export default function Edit( { className } ) { - return ( -

- { __( '{{title}} – hello from the editor!', '{{textdomain}}' ) } -

- ); -} diff --git a/packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache b/packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache deleted file mode 100644 index 0f0c68b4cf4885..00000000000000 --- a/packages/create-block/lib/templates/controls-esnext/src/editor.scss.mustache +++ /dev/null @@ -1,9 +0,0 @@ -/** - * The following styles get applied inside the editor only. - * - * Replace them with your own styles or remove the file completely. - */ - -.wp-block-{{namespace}}-{{slug}} { - border: 1px dotted red; -} diff --git a/packages/create-block/lib/templates/controls-esnext/src/save.js.mustache b/packages/create-block/lib/templates/controls-esnext/src/save.js.mustache deleted file mode 100644 index 403eb2f1965553..00000000000000 --- a/packages/create-block/lib/templates/controls-esnext/src/save.js.mustache +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Retrieves the translation of text. - * - * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/ - */ -import { __ } from '@wordpress/i18n'; - -/** - * The save function defines the way in which the different attributes should - * be combined into the final markup, which is then serialized by the block - * editor into `post_content`. - * - * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save - * - * @return {WPElement} Element to render. - */ -export default function save() { - return ( -

- { __( - '{{title}} – hello from the saved content!', - '{{textdomain}}' - ) } -

- ); -} diff --git a/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache b/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache deleted file mode 100644 index 7ae84ceb49ac02..00000000000000 --- a/packages/create-block/lib/templates/controls-esnext/src/style.scss.mustache +++ /dev/null @@ -1,20 +0,0 @@ - -.wp-block-gutenberg-examples-example-04-controls-esnext { - color: #fff; - background: #00a8db; - border: 2px solid #0D72B2; - padding: 20px; - font-family: sans-serif; -} - -.gutenberg-examples-align-left { - text-align: left; -} - -.gutenberg-examples-align-center { - text-align: center; -} - -.gutenberg-examples-align-right { - text-align: right; -} \ No newline at end of file diff --git a/packages/create-block/lib/templates/controls-esnext/style.css.mustache b/packages/create-block/lib/templates/controls-esnext/style.css.mustache new file mode 100644 index 00000000000000..019de4fd1b6630 --- /dev/null +++ b/packages/create-block/lib/templates/controls-esnext/style.css.mustache @@ -0,0 +1,30 @@ +/** + * 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. + */ + +/** + * Note that these styles are loaded *before* editor styles, so that + * editor-specific styles using the same selectors will take precedence. + */ +.wp-block-{{namespace}}-{{slug}} { + color: #fff; + background: orange; + border: 2px solid #0D72B2; + padding: 20px; + font-family: sans-serif; +} + +.gutenberg-examples-align-left { + text-align: left; +} + +.gutenberg-examples-align-center { + text-align: center; +} + +.gutenberg-examples-align-right { + text-align: right; +} \ No newline at end of file diff --git a/packages/create-block/lib/templates/esnext/$slug.php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache index e5f30dfffa15a4..4dab0974ac5dc2 100644 --- a/packages/create-block/lib/templates/esnext/$slug.php.mustache +++ b/packages/create-block/lib/templates/esnext/$slug.php.mustache @@ -43,22 +43,6 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { $script_asset['version'] ); - $editor_css = 'editor.css'; - wp_register_style( - '{{namespace}}-{{slug}}-block-editor', - plugins_url( $editor_css, __FILE__ ), - array(), - filemtime( "$dir/$editor_css" ) - ); - - $style_css = 'style.css'; - wp_register_style( - '{{namespace}}-{{slug}}-block', - plugins_url( $style_css, __FILE__ ), - array(), - filemtime( "$dir/$style_css" ) - ); - register_block_type( '{{namespace}}/{{slug}}', array( 'editor_script' => '{{namespace}}-{{slug}}-block-editor', 'editor_style' => '{{namespace}}-{{slug}}-block-editor', From 2ac267b72ac9c51099652442c3cd9280d7a62aba Mon Sep 17 00:00:00 2001 From: intelijens Date: Sat, 20 Jun 2020 01:38:02 -0700 Subject: [PATCH 5/5] add/controls-template-esnext - reverted mistakened edit of esnext template --- .../lib/templates/esnext/$slug.php.mustache | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/create-block/lib/templates/esnext/$slug.php.mustache b/packages/create-block/lib/templates/esnext/$slug.php.mustache index 4dab0974ac5dc2..e5f30dfffa15a4 100644 --- a/packages/create-block/lib/templates/esnext/$slug.php.mustache +++ b/packages/create-block/lib/templates/esnext/$slug.php.mustache @@ -43,6 +43,22 @@ function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() { $script_asset['version'] ); + $editor_css = 'editor.css'; + wp_register_style( + '{{namespace}}-{{slug}}-block-editor', + plugins_url( $editor_css, __FILE__ ), + array(), + filemtime( "$dir/$editor_css" ) + ); + + $style_css = 'style.css'; + wp_register_style( + '{{namespace}}-{{slug}}-block', + plugins_url( $style_css, __FILE__ ), + array(), + filemtime( "$dir/$style_css" ) + ); + register_block_type( '{{namespace}}/{{slug}}', array( 'editor_script' => '{{namespace}}-{{slug}}-block-editor', 'editor_style' => '{{namespace}}-{{slug}}-block-editor',