Merl 1147 faustwp block editor block controls implement color control

[TeresaGobble]

Tasks

• I have signed a Contributor License Agreement (CLA) with WP Engine.
• If a code change, I have written testing instructions that the whole team & outside contributors can understand.
• I have written and included a comprehensive changeset to properly document the changes I've made.

Description

This PR meets the needs outlined in MERL-1147 , adding the Color control utility outlined in the RFC for React Components to Gutenberg blocks, here.

Related Issue(s):

This PR merged in changes from MERL-1149.

Testing

After pulling this branch down, run the following commands in the faustjs monorepo:

1. run npm install
2. run npm run build
3. run npm run build -w packages/block-editor-utils
4. run cd packages/block-editor-utils
5. run npm link

Switch to your testing site's repo.
6. On your WordPress instance create a new block plugin using @wordpress/create-block
npx @wordpress/create-block hello-world-block
7. cd to your new block plugin's folder
8. Inside the hello-world-block plugin folder, run npm link @faustwp/block-editor-utils to add a reference to the package.
9. Replace hello-world-block's generated index.js file with the below code block:

// In app/public/wp-content/plugins/hello-world-block/src/index.js:

import { addFilter } from '@wordpress/hooks';
import "./style.scss";

// import block.json
import metadata from "./block.json";

// import Pure React Component
import HelloWorld from "./HelloWorld";

// Register React Component in Gutenberg
import { registerFaustBlock } from "@faustwp/block-editor-utils";

registerFaustBlock(HelloWorld, { blockJson: metadata });

10. Replace hello-world-block's generated `block.json file with the below code block.

In app/public/wp-content/plugins/hello-world-block/src/block.json:

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 2,
	"name": "create-block/hello-world-block",
	"version": "0.1.0",
	"title": "Hello World Block",
	"category": "widgets",
	"icon": "smiley",
	"description": "Example block scaffolded with Create Block tool.",
	"supports": {
		"html": false
	},
	"attributes": {
		"message": {
			"type": "string",
			"default": "Hello World"
		},
		"colorPicker": {
			"type": "string",
			"default": "#fff"
		}
	},
	"textdomain": "hello-world-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

11. Add a file named HelloWorld.js and add the below code block.

// In app/public/wp-content/plugins/hello-world-block/src/HelloWorld.js:

function HelloWorld({ style, className, attributes, children, ...props }) {
	const styles = {
		...style,
		backgroundColor: attributes.bg_color,
		color: attributes.text_color,
	};
	return (
		<div
			{...props}
			style={styles}
			className={className}
			dangerouslySetInnerHTML={{ __html: attributes.message }}
		/>
	);
}

HelloWorld.config = {
	name: "HelloWorld",
        editorFields: {
		message: {
			type: "string",
			default: "",
			label: "My Message",
			location: "editor",
		},
		colorPicker: {
			location: "inspector",
			control: "color"
		}
	},
};
export default HelloWorld;

12. Run npm start from your plugin's file, hello-world-block.

13. After ensuring your block plugin, Hello World Block is active.

14. Go into the editor and try to create a new Hello World Block block. You should look to the sidebar and see the colorPicker panel visible. Ensure that upon selecting a color and navigating away and back to the block, that the color has been saved. See the below video for expected behavior:

Screen.Recording.2023-09-06.at.2.26.04.PM.mov

Documentation Changes

[github-actions]

📦 Next.js Bundle Analysis for @faustwp/getting-started-example

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[TeresaGobble]

Hi @theodesp ! I wanted to ask two clarifying questions on the ticket associated with this PR:

1. Do I also need to add a reference document to faustjs.org describing the ColorControl, or is that handled by the MERL-1154 ticket you have in flight?
2. Should I assume this needs additional unit testing beyond what you wrote for the TextControl component?

[theodesp]

Hi @theodesp ! I wanted to ask two clarifying questions on the ticket associated with this PR:

1. Do I also need to add a reference document to faustjs.org describing the ColorControl, or is that handled by the MERL-1154 ticket you have in flight?
2. Should I assume this needs additional unit testing beyond what you wrote for the TextControl component?

Hey @TeresaGobble.

1. No. I will provide a getting started guide for this. The reference part is the RFC that will be provided.
2. It would be helpful to write some basic unit tests using jest. and test that the setAttributes function working as expected.

you can use this guide here:

https://testing-library.com/docs/example-input-event/

[changeset-bot]

🦋 Changeset detected

Latest commit: f6cbf2d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@faustwp/block-editor-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[matthewguywright]

Besides the test you may add this looks great. Awesome job!