New Package: Gutenpride Template to use with the tutorial

docs/manifest.json

@@ -1601,6 +1601,12 @@
 		"markdown_source": "../packages/format-library/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/gutenpride-template",
+		"slug": "packages-gutenpride-template",
+		"markdown_source": "../packages/gutenpride-template/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/hooks",
 		"slug": "packages-hooks",

packages/gutenpride-template/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/gutenpride-template/CHANGELOG.md

@@ -0,0 +1,5 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/master/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+Initial release.

packages/gutenpride-template/README.md

@@ -0,0 +1,15 @@
+# Gutenpride Template
+
+
+This is a template for @wordpress/create-block that is the finished version of the block in the official [WordPress tutorial](/docs/designers-developers/developers/tutorials/create-block).
+
+
+## Usage
+
+This block template can be used by running the following command:
+
+```bash
+npx  @wordpress/create-block --template gutenpride-template
+```
+
+<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/gutenpride-template/package.json

@@ -0,0 +1,20 @@
+{
+	"name": "@wordpress/gutenpride-template",
+	"version": "1.0.0-prerelease",
+	"description": "Template for @wordpress/create-block used in the official WordPress tutorial.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [ "wordpress", "create block", "gutenpride", "block template" ],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/docs/designers-developers/developers/tutorials/create-block",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/gutenpride-template"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/gutenpride-template/src/$slug.php.mustache

@@ -0,0 +1,71 @@
+<?php
+/**
+ * Plugin Name:     {{title}}
+{{#description}}
+ * Description:     {{description}}
+{{/description}}
+ * Version:         {{version}}
+{{#author}}
+ * Author:          {{author}}
+{{/author}}
+{{#license}}
+ * License:         {{license}}
+{{/license}}
+{{#licenseURI}}
+ * License URI:     {{{licenseURI}}}
+{{/licenseURI}}
+ * Text Domain:     {{textdomain}}
+ *
+ * @package         {{namespace}}
+ */
+
+/**
+ * Registers all block assets so that they can be enqueued through the block editor
+ * in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/applying-styles-with-stylesheets/
+ */
+function {{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init() {
+	$dir = dirname( __FILE__ );
+
+	$script_asset_path = "$dir/build/index.asset.php";
+	if ( ! file_exists( $script_asset_path ) ) {
+		throw new Error(
+			'You need to run `npm start` or `npm run build` for the "{{namespace}}/{{textdomain}}" block first.'
+		);
+	}
+	$index_js     = 'build/index.js';
+	$script_asset = require( $script_asset_path );
+	wp_register_script(
+		'{{namespace}}-{{slug}}-block-editor',
+		plugins_url( $index_js, __FILE__ ),
+		$script_asset['dependencies'],
+		$script_asset['version']
+	);
+	wp_set_script_translations( '{{namespace}}-{{slug}}-block-editor', '{{textdomain}}' );
+
+	$editor_css = 'build/index.css';
+
+	wp_register_style(
+		'{{namespace}}-{{slug}}-block-editor',
+		plugins_url( $editor_css, __FILE__ ),
+		array(),
+		filemtime( "$dir/$editor_css" )
+	);
+
+	$style_css = 'build/style-index.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',
+		'style'         => '{{namespace}}-{{slug}}-block',
+	) );
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

packages/gutenpride-template/src/index.js

@@ -0,0 +1,13 @@
+module.exports = {
+	defaultValues: {
+		slug: 'block-template-gutenpride',
+		namespace: 'gutenpride',
+		title: 'Gutenpride',
+		description:
+			'A Gutenberg block to show your pride! This block enables you to type text and style it with the color font Gilbert from Type with Pride',
+
+		dashicon: 'smiley',
+	},
+	templatesPath: __dirname,
+	assetsPath: require( 'path' ).join( __dirname, 'assets' ),
+};

packages/gutenpride-template/src/readme.txt.mustache

@@ -0,0 +1,65 @@
+=== {{title}} ===
+{{#author}}
+Contributors:      {{author}}
+{{/author}}
+Tags:              block
+Requires at least: 5.5.1
+Tested up to:      5.6.0
+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.

packages/gutenpride-template/src/src/edit.js.mustache

@@ -0,0 +1,41 @@
+/**
+ * WordPress components that create the necessary UI elements for the block
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-components/
+ */
+import { Placeholder, TextControl } from '@wordpress/components';
+
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * 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
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps();
+	return (
+	<div { ...blockProps }>
+		<TextControl
+			value={ attributes.message }
+			onChange={ ( val ) => setAttributes( { message: val } ) }
+		/>
+	</div>
+	);
+}

packages/gutenpride-template/src/src/editor.scss.mustache

@@ -0,0 +1,14 @@
+/**
+ * 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;
+}
+
+.wp-block-{{namespace}}-{{slug}} input[type='text'] {
+	font-family: Gilbert;
+	font-size: 64px;
+}

packages/gutenpride-template/src/src/index.js.mustache

@@ -0,0 +1,98 @@
+/**
+ * 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';
+
+/**
+ * Sass files
+ */
+import './style.scss';
+import './editor.scss';
+
+/**
+ * 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}}
+
+	/**
+	* Attributes are the way a block stores data, they define how a block is parsed to extract data from the saved content.
+	* When the block loads it will look at the saved content for the block, look for the div tag, take the text portion, and store the content in an attributes.message variable.
+	*
+	*  @see https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/
+	*/
+
+	attributes: {
+		message: {
+			type: 'string',
+			source: 'text',
+			selector: 'div',
+		},
+	},
+
+	/**
+	 * Optional block extended support features.
+	 */
+	supports: {
+		// Removes support for an HTML mode.
+		html: false,
+	},
+
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+});

packages/gutenpride-template/src/src/save.js.mustache

@@ -0,0 +1,28 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+
+/**
+
+ * 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( { attributes } ) {
+	return <div { ...useBlockProps.save() }>{ attributes.message }</div>;