New Package: Gutenpride Template to use with the tutorial

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,13 @@
+# Gutenpride Template
+
+A package containing a block template to use with @wordpress/create-block.
+
+## Usage
+
+This block template can be used by running the following command:
+
+```bash
+npm  @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": "A package containing a block template to use with @wordpress/create-block.",
+	"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/packages/gutenpride-template/README.md",
+	"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,69 @@
+<?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 = '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',
+		'style'         => '{{namespace}}-{{slug}}-block',
+	) );
+}
+add_action( 'init', '{{namespaceSnakeCase}}_{{slugSnakeCase}}_block_init' );

packages/gutenpride-template/src/editor.css.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/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,57 @@
+=== Gutenpride ===
+Contributors:      The WordPress Contributors
+Tags:              block
+Requires at least: 5.5.0
+Tested up to:      5.5.1
+Stable tag:        0.1.0
+Requires PHP:      7.0.0
+License:           GPL-2.0-or-later
+License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+
+Example block written with ESNext standard and JSX support – build step required.
+
+== 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/gutenpride` 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 ==
+
+= 0.1.0 =
+* 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,29 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
+ */
+import { Placeholder, TextControl } from '@wordpress/components';
+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.
+ * @param {string} [props.className] Class name generated for the block.
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit( { attributes, className, setAttributes } ) {
+	return (
+		<TextControl
+			className={ className }
+			value={ attributes.message }
+			onChange={ ( val ) => setAttributes( { message: val } ) }
+		/>
+	);
+}

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

@@ -0,0 +1,86 @@
+/**
+ * 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}}
+
+    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,19 @@
+/**
+ * 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( { attributes, className } ) {
+	return <div className={ className }>{ attributes.message }</div>;
+}

packages/gutenpride-template/src/style.css.mustache

@@ -0,0 +1,10 @@
+@font-face {
+    font-family: Gilbert;
+    src: url(./assets/gilbert-color.otf);
+    font-weight: bold;
+}
+
+.wp-block-{{namespace}}-{{slug}} {
+    font-family: Gilbert;
+    font-size: 64px;
+}