[Merl 1149] Add TextControl field

[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

• registerFaustBlock Edit function now handles text control fields.

Related Issue(s):

#1522

Testing

Follow testing instruction from this PR:

#1559

• Make sure to add a field with type: text.
• Create a new block. You should be able to see the text fields for that attribute. You should be able to update the field and the field should persist when saving the post/page.

Screenshots

Documentation Changes

Dependant PRs

[changeset-bot]

🦋 Changeset detected

Latest commit: e03a555

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

[github-actions]

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

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

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	242.65 KB (🟡 +25 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

[TeresaGobble]

Thank you for your work on this, @theodesp! I had some questions on expected behavior to clarify with you on this item, as well as a related question about the associated RFC and some assumptions I may be making.

Below, I've tested out the block in my example, following the instructions above. I'm noting the text control field, which looks as expected based on the WordPress TextControl component. 👍

My concern now is whether the TextControl field is behaving as expected when clicking away from the block in the editor, and when examining the block contents on the front-end post.

Screen.Recording.2023-09-05.at.3.57.48.PM.mov

When clicking away from the block in the editor, I seem to just see the attribute message default from the block.json file in the testing plugin, "Hello World" instead of my text input, "A little message." "Hello World" also appears as the content in my block on the front-end, instead of the text in the text control field ("A little message"). However, the input does appear to persist after refreshing the page in editing mode in the block.

Is this block working as expected?

If not, I have a follow-up question on testing. In my HelloWorld.js made as part of testing instructions, I have added this editorField, message2:

HelloWorld.config = {
	name: "HelloWorld",
        editorFields: {
		message: {
			type: "string",
			default: "",
			label: "My Message",
			location: "editor",
			control: "textarea",
		},
		bg_color: {
			location: "editor",
			control: "color",
		},
        message2: {
			type: "string", 
			default: "text default",
			location: "editor",
			control: "text",
        },
	},
};

I have it here as type: "string" because in the RFC here, this seems to resolve to the correct type for the TextControl field. But the testing instructions above say to add a type: text. Am I off base with my understanding of how the registerFaustBlock helper works?

Here is my testing plugin's block.json as well for reference:

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

[TeresaGobble]

Thank you for your thorough walkthrough of expected behavior and my questions on the RFC, @theodesp! This LGTM! 😊 ✨