Create your First App with Gutenberg Data tutorial (#191)

* Add My first Gutenberg app example

* Add 09-code-data-basics-esnext to lerna.json

09-code-data-basics-esnext/.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends":  [ "plugin:@wordpress/eslint-plugin/recommended" ]
+}

09-code-data-basics-esnext/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-components', 'wp-core-data', 'wp-data', 'wp-element', 'wp-polyfill'), 'version' => '93651ae1be8cf64079654a48191d7fdb');

09-code-data-basics-esnext/index.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Plugin Name: My first Gutenberg App
+ *
+ */
+
+function my_admin_menu() {
+	// Create a new admin page for our app.
+	add_menu_page(
+		__( 'My first Gutenberg app', 'gutenberg' ),
+		__( 'My first Gutenberg app', 'gutenberg' ),
+		'manage_options',
+		'my-first-gutenberg-app',
+		function () {
+			echo '
+			<h2>Pages</h2>
+			<div id="my-first-gutenberg-app"></div>
+		';
+		},
+		'dashicons-schedule',
+		3
+	);
+}
+
+add_action( 'admin_menu', 'my_admin_menu' );
+
+function load_custom_wp_admin_scripts( $hook ) {
+	// Load only on ?page=my-first-gutenberg-app.
+	if ( 'toplevel_page_my-first-gutenberg-app' !== $hook ) {
+		return;
+	}
+
+	// Load the required WordPress packages.
+
+	// Automatically load dependencies and version.
+	$asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
+
+	// Enqueue CSS dependencies.
+	foreach ( $asset_file['dependencies'] as $style ) {
+		wp_enqueue_style( $style );
+	}
+
+	// Load our app.js.
+	wp_register_script(
+		'09-code-data-basics-esnext',
+		plugins_url( 'build/index.js', __FILE__ ),
+		$asset_file['dependencies'],
+		$asset_file['version']
+	);
+	wp_enqueue_script( '09-code-data-basics-esnext' );
+
+	// Load our style.css.
+	wp_register_style(
+		'09-code-data-basics-esnext',
+		plugins_url( 'style.css', __FILE__ )
+	);
+	wp_enqueue_style( '09-code-data-basics-esnext' );
+}
+
+add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_scripts' );

09-code-data-basics-esnext/package.json

@@ -0,0 +1,28 @@
+{
+ "name": "05-recipe-card-esnext",
+ "version": "1.1.0",
+ "private": true,
+ "description": "Example: Recipe Card (ESNext).",
+ "author": "The WordPress Contributors",
+ "license": "GPL-2.0-or-later",
+ "keywords": [
+  "WordPress",
+  "block"
+ ],
+ "homepage": "https://github.com/WordPress/gutenberg-examples/",
+ "repository": "git+https://github.com/WordPress/gutenberg-examples.git",
+ "bugs": {
+  "url": "https://github.com/WordPress/gutenberg-examples/issues"
+ },
+ "main": "build/index.js",
+ "devDependencies": {
+  "@wordpress/scripts": "^18.0.1"
+ },
+ "scripts": {
+  "build": "wp-scripts build",
+  "format:js": "wp-scripts format-js",
+  "lint:js": "wp-scripts lint-js",
+  "packages-update": "wp-scripts packages-update",
+  "start": "wp-scripts start"
+ }
+}

09-code-data-basics-esnext/src/index.js

@@ -0,0 +1,71 @@
+import { SearchControl, Spinner } from '@wordpress/components';
+import { useState, render } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreDataStore } from '@wordpress/core-data';
+
+function MyFirstApp() {
+	const [ searchTerm, setSearchTerm ] = useState( '' );
+	const { pages, hasResolved } = useSelect(
+		( select ) => {
+			const query = {};
+			if ( searchTerm ) {
+				query.search = searchTerm;
+			}
+			const selectorArgs = [ 'postType', 'page', query ];
+			return {
+				pages: select( coreDataStore ).getEntityRecords(
+					...selectorArgs
+				),
+				hasResolved: select( coreDataStore ).hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+			};
+		},
+		[ searchTerm ]
+	);
+
+	return (
+		<div>
+			<SearchControl onChange={ setSearchTerm } value={ searchTerm } />
+			<PagesList hasResolved={ hasResolved } pages={ pages } />
+		</div>
+	);
+}
+
+function PagesList( { hasResolved, pages } ) {
+	if ( ! hasResolved ) {
+		return <Spinner />;
+	}
+	if ( ! pages?.length ) {
+		return <div>No results</div>;
+	}
+
+	return (
+		<table className="wp-list-table widefat fixed striped table-view-list">
+			<thead>
+			<tr>
+				<td>Title</td>
+			</tr>
+			</thead>
+			<tbody>
+			{ pages?.map( ( page ) => (
+				<tr key={ page.id }>
+					<td>{ page.title.rendered }</td>
+				</tr>
+			) ) }
+			</tbody>
+		</table>
+	);
+}
+
+window.addEventListener(
+	'load',
+	function () {
+		render(
+			<MyFirstApp />,
+			document.querySelector( '#my-first-gutenberg-app' )
+		);
+	},
+	false
+);

09-code-data-basics-esnext/style.css

@@ -0,0 +1,17 @@
+.toplevel_page_my-first-gutenberg-app #wpcontent {
+	background: #FFF;
+}
+#my-first-gutenberg-app {
+	max-width: 500px;
+}
+#my-first-gutenberg-app ul,
+#my-first-gutenberg-app ul li {
+	list-style-type: disc;
+}
+#my-first-gutenberg-app ul {
+	padding-left: 20px;
+}
+#my-first-gutenberg-app .components-search-control__input {
+	height: 36px;
+	margin-left: 0;
+}

index.php

@@ -25,6 +25,7 @@
 include '06-inner-blocks-esnext/index.php';
 include '07-slotfills-esnext/index.php';
 include '08-block-supports-esnext/index.php';
+include '09-code-data-basics-esnext/index.php';
 include 'format-api/index.php';
 include 'plugin-sidebar/plugin-sidebar.php';
 include 'meta-block/meta-block.php';

lerna.json

@@ -6,6 +6,7 @@
     "05-recipe-card-esnext",
     "06-inner-blocks-esnext",
     "08-block-supports-esnext",
+    "09-code-data-basics-esnext",
     "format-api"
   ],
   "version": "independent"