Feat: InspectorFields component

[theodesp]

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

• Implements automatic handling of InspectorFields controls as per RFC document.
• Unit tests added

Related Issue(s):

#1522

Testing

1. run npm install
2. Build the project
   npm run build -w packages/block-editor-utils
3. cd inside the project folder:
   cd packages/block-editor-utils
4. run npm link
5. On your WordPress instance create a new block plugin using @wordpress/create-block
   npx @wordpress/create-block hello-world-block
6. Inside the plugin folder run npm link @faustwp/block-editor-utils to add a reference to the package.
7. Rewrite the genenated index.js editor script to use the registerFaustBlock helper function instead adding the hook for testing the controls

// 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";

addFilter(
  'faustBlockEditorUtils.controls',
  'faust-block-editor-utils',
  (controls) => {
    controls.color = () => <div>Another Color</div>;
    return controls;
  },
);

registerFaustBlock(HelloWorld, { blockJson: metadata });

Here HelloWorld is a simple Div Component with the editorFields config that contains a color field

// 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",
			control: "textarea",
		},
		bg_color: {
			location: "inspector",
			control: "color",
		},
	},
};
export default HelloWorld;

// 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"
		},
		"bg_color": { "type": "string", "default": "#000000" }
	},
	"textdomain": "hello-world-block",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css"
}

7. Run npm start to build the compiled js

8. Now go into the editor and try to create a new block. You should be able to see the Edit mode component. On the sidebar you can see the example color control component that we defined for testing purposes.

Screenshots

Documentation Changes

Dependant PRs

[changeset-bot]

⚠️ No Changeset found

Latest commit: edf934a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[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! 🙌

[blakewilson]

Hey @theodesp,

I followed your testing instructions, but I'm not seeing the same thing. It looks like there are no new editor fields when I try and edit the block:

[theodesp]

Hey @theodesp,

I followed your testing instructions, but I'm not seeing the same thing. It looks like there are no new editor fields when I try and edit the block:

Are there any console errors you can share? I tried the steps on a new plugin without issues.

[blakewilson]

@theodesp Nope, no console errors that stand out 🤔

[matthewguywright]

We ran through the testing steps with Theo during a meeting.

[TeresaGobble]

The panel body features "Another Color" as expected. Still seeing the semi-colon, not sure how to remove that except for maybe with snipping it in the file InspectorFields.tsx, line 34, and putting ats-ignore line above it.

Edit: Fixed by Theo during pairing!