Display the help text in the TextareaArray setting #62

kienstra · 2021-02-04T21:33:17Z

(Testing instructions still valid as of May 5th)

Before

After

Changes

Adds help text to <textarea> settings in Multiselect, Select, and Radio fields

Testing instructions

composer install && npm install && npm run dev
/wp-admin > Custom Blocks > Add New
Add a new field
Change the Field Type to Select
Expected: the new help text displays:
Change the Field Type to Multiselect
Expected: there's new help text under 2 settings:
Change the Field Type to Radio
Expected: there's new help text:

Without this, it's really hard to know what to enter. This existed before, but it usually had markup. So instead of doing __dangerouslySetInnerHTML={}, enter the markup in the React file, and use other help text if it exists.

It looks like it has to be wp-env in CircleCI.

kienstra · 2021-02-04T21:42:54Z

js/src/edit-block/components/settings/textarea-array.js

+								'genesis-custom-blocks'
+							) }
+						</p>
+						<p className={ helpClass }>


Before, this help text was in setting.help, but it has markup.

So instead of doing dangerouslySetInnerHTML={ setting.default }, this has the markup in the React file.

kienstra · 2021-02-04T21:44:02Z

php/Blocks/Controls/Multiselect.php

-					_x( 'foo : Foo', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' ),
-					_x( 'bar : Bar', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' )
-				),
+				'help'     => '',


This is now in the React file.

This is '' here in PHP to not override the React's component's help markup.

kienstra · 2021-02-04T21:44:54Z

php/Blocks/Controls/Multiselect.php

@@ -69,7 +63,7 @@ public function register_settings() {
 				'label'    => __( 'Default Value', 'genesis-custom-blocks' ),
 				'type'     => 'textarea_array',
 				'default'  => '',
-				'help'     => __( 'Enter each default value on a new line.', 'genesis-custom-blocks' ),
+				'help'     => __( 'Each default value on a new line.', 'genesis-custom-blocks' ),


To be similar to the other text. I removed this word from the other text to display on 2 lines instead of 3.

kienstra · 2021-02-04T21:45:35Z

js/src/edit-block/components/editor.js

+ * @property {string} help A help value that display in the GCB editor.
+ * @property {string} type The setting type, like 'width' or 'text', not a data type like boolean.
+ * @property {*} default The default value.
+ */


Not related to this PR, but noticed I forgot to give Setting a @typedef before.

kienstra · 2021-02-04T21:59:25Z

Hi @dreamwhisper,
Thanks for bringing this up, it's tough to know what to enter in the <textarea> without help text.

How does this look?

kienstra · 2021-02-11T03:17:14Z

Hi @RobStino,
Could you please review this? Thanks!

dreamwhisper · 2021-03-09T16:08:57Z

@kienstra I'm having some trouble with the multiselect.

I see this when the block is on the page. Also, no default appears selected.

Add the block to the page.
click outside the block or save, then leave the page and come back.

kienstra · 2021-03-09T16:27:56Z

Hi @dreamwhisper,
Thanks a lot for testing this and raising the issue with the multiselect. I'll look at that.

kienstra · 2021-03-09T19:27:57Z

Hi @dreamwhisper,
Thanks, I saw the same thing you saw:

I'll work on this when GCB tickets get slotted into a sprint 😄

There were conflicts in: js/src/edit-block/components/settings/checkbox.js package.json php/Blocks/Controls/Multiselect.php php/Blocks/Controls/Radio.php php/Blocks/Controls/Select.php tests/php/Unit/Blocks/Controls/TestMultiselect.php tests/php/Unit/Blocks/Controls/TestRadio.php tests/php/Unit/Blocks/Controls/TestSelect.php In almost all cases, resolve conflicts in favor of this branch: add/choices-description. Expect in package.json.

ControlSetting doesn't have a ->sanitize or ->validate property anymore. So no need to pass that. These settings are saved in React, and are not validated.

If the field no longer exists, there's no need to add it to the block's attributes.

There's a new package that was just released 3 days ago.

This reverts commit a344c51.

Without this, <ServerSideRender> could have a network error.

The attribute could be of a different type. For example, changing from a Url field to Image, the type will change from from string to integer. So this prevents an error in ServerSideRender.

The server-side will only have the saved post values. So pass the saved previewAttributes, not just the edited ones. This looks to prevent errors in <ServerSideRender>.

kienstra · 2021-05-03T22:37:26Z

js/src/edit-block/components/header.js

@@ -109,10 +109,7 @@ const Header = ( { editorMode, setEditorMode } ) => {
 			</button>
 			<div id="save-and-publish">
 				<span className="mr-3 text-sm">
-					<PostSavedState
-						forceIsDirty={ false }
-						forceIsSaving={ false }


These are essentially false by default. So no need to pass false.

If there is nothing saved, there will be nothing to preview.

Maybe if this were more effortless, it would allow them to click a <button> to do that.

Some blocks won't have fields, just a template.

kienstra · 2021-05-04T18:50:45Z

js/src/edit-block/components/settings/textarea-array.js

+							foo : Foo
+						</p>
+						<p className={ helpClass }>
+							bar : Bar


Intentionally not translated

It looks like this was a real failure: one of the issues was a deletion of something that didn't exist.

This will look for a combobox (select) with a lable, as that's more like what a user would look for.

… adds that dir When e2e tests fail, it looks like it uses that to add a screenshot.

kienstra · 2021-05-05T04:39:54Z

js/src/edit-block/components/editor-preview.js

+ *
+ * @return {React.ReactElement} The editor preview.
+ */
+const EditorPreview = () => {


This file is mainly extracted out of editor.js

kienstra · 2021-05-05T04:42:19Z

js/src/edit-block/components/front-end-preview.js

+ *
+ * @return {React.ReactElement} The front-end preview.
+ */
+const FrontEndPreview = () => {


This file is mainly extracted from editor.js, with some conditionals in case there's nothing to preview.

kienstra · 2021-05-05T04:45:22Z

php/Blocks/Controls/Radio.php

-					_x( 'foo : Foo', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' ),
-					_x( 'bar : Bar', 'Format for the menu values. option_value : Option Name', 'genesis-custom-blocks' )
-				),
+				'help'    => '',


This is now rendered in React.

newAttributes is actually a key/value pair, I think.

These should be saved as a string[], not as an array of objects, like before.

kienstra · 2021-05-05T06:20:13Z

js/src/edit-block/components/settings/textarea-default.js

+ * @param {TextareaDefaultProps} props The component props.
+ * @return {React.ReactElement} The textarea default component.
+ */
+const TextareaDefault = ( { handleOnChange, setting, value } ) => {


This component should fix the problem with the Multiselect error. It saves the default value as an array of strings, instead of the array of objects it did before.

kienstra · 2021-05-05T06:23:03Z

Hi @dreamwhisper,
Thanks a lot for testing this before.

Could you please test it again? The multiselect issue looks to be fixed in my local.

Thanks, Jen!

dreamwhisper

Looks good!

kienstra · 2021-05-06T20:43:46Z

Thanks so much, Jen!!!

kienstra added 2 commits February 4, 2021 15:31

Display the help text for the TextareaArray setting

69408f4

Without this, it's really hard to know what to enter. This existed before, but it usually had markup. So instead of doing __dangerouslySetInnerHTML={}, enter the markup in the React file, and use other help text if it exists.

Let e2e tests run by changing to wp-env

9176d61

It looks like it has to be wp-env in CircleCI.

kienstra commented Feb 4, 2021

View reviewed changes

kienstra requested review from lukecarbis and dreamwhisper February 4, 2021 21:58

kienstra requested a review from RobStino February 11, 2021 03:17

kienstra marked this pull request as ready for review February 16, 2021 15:32

kienstra added 10 commits April 30, 2021 14:49

Remove sanitize and validate values from settings

e0c1fc5

ControlSetting doesn't have a ->sanitize or ->validate property anymore. So no need to pass that. These settings are saved in React, and are not validated.

If a field is deleted, also delete it from the previewAttributes

4af23d4

If the field no longer exists, there's no need to add it to the block's attributes.

See if upgrading server-side-render is possible

a344c51

There's a new package that was just released 3 days ago.

Revert "See if upgrading server-side-render is possible"

5e84929

This reverts commit a344c51.

When changing a field name, change the name in the previewAttributes

81c1820

Without this, <ServerSideRender> could have a network error.

On changing the field type, delete the previewAttribute

66452fe

The attribute could be of a different type. For example, changing from a Url field to Image, the type will change from from string to integer. So this prevents an error in ServerSideRender.

Refactor preview into <FrontEndPreview> component

f1c4aff

Possible approach to handling <ServerSideRender> error

67ae09b

Simpler approach to front-end preview (if it works)

236e885

The server-side will only have the saved post values. So pass the saved previewAttributes, not just the edited ones. This looks to prevent errors in <ServerSideRender>.

kienstra commented May 3, 2021

View reviewed changes

kienstra added 3 commits May 3, 2021 18:16

Handle the Front-end preview for new post

19632aa

If there is nothing saved, there will be nothing to preview.

If there is no field to preview, suggest that they add a field

7cb75db

Maybe if this were more effortless, it would allow them to click a <button> to do that.

Change text to 'edit the block,' as it doesn't need fields

5028610

Some blocks won't have fields, just a template.

kienstra commented May 4, 2021

View reviewed changes

kienstra added 4 commits May 4, 2021 15:13

See if userEven helps the test pass

5492839

Fix failed e2e test

abd6979

It looks like this was a real failure: one of the issues was a deletion of something that didn't exist.

Make e2e test more robust: query for role, not selector

4a8b58a

This will look for a combobox (select) with a lable, as that's more like what a user would look for.

Add artifacts/ to .gitignore, it looks like the new wordpress/scripts…

094953f

… adds that dir When e2e tests fail, it looks like it uses that to add a screenshot.

kienstra commented May 5, 2021

View reviewed changes

kienstra added 3 commits May 4, 2021 23:46

Pluralize the attributes names and values

ce7d120

newAttributes is actually a key/value pair, I think.

Add a new component for the Multiselect defaults

a538af9

These should be saved as a string[], not as an array of objects, like before.

Fix the failed PHPUnit test

96156f2

kienstra commented May 5, 2021

View reviewed changes

kienstra requested review from dreamwhisper and removed request for dreamwhisper May 5, 2021 06:23

dreamwhisper approved these changes May 6, 2021

View reviewed changes

kienstra merged commit 1ba74a3 into develop May 7, 2021

kienstra deleted the add/choices-description branch May 7, 2021 16:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display the help text in the TextareaArray setting #62

Display the help text in the TextareaArray setting #62

kienstra commented Feb 4, 2021 •

edited

Loading

kienstra Feb 4, 2021 •

edited

Loading

kienstra Feb 4, 2021 •

edited

Loading

kienstra Feb 4, 2021

kienstra Feb 4, 2021 •

edited

Loading

kienstra commented Feb 4, 2021

kienstra commented Feb 11, 2021

dreamwhisper commented Mar 9, 2021

kienstra commented Mar 9, 2021

kienstra commented Mar 9, 2021

kienstra May 3, 2021 •

edited

Loading

kienstra May 4, 2021

kienstra May 5, 2021

kienstra May 5, 2021

kienstra May 5, 2021

kienstra May 5, 2021

kienstra commented May 5, 2021

dreamwhisper left a comment

kienstra commented May 6, 2021

Display the help text in the TextareaArray setting #62

Display the help text in the TextareaArray setting #62

Conversation

kienstra commented Feb 4, 2021 • edited Loading

Before

After

Changes

Testing instructions

kienstra Feb 4, 2021 • edited Loading

Choose a reason for hiding this comment

kienstra Feb 4, 2021 • edited Loading

Choose a reason for hiding this comment

kienstra Feb 4, 2021

Choose a reason for hiding this comment

kienstra Feb 4, 2021 • edited Loading

Choose a reason for hiding this comment

kienstra commented Feb 4, 2021

kienstra commented Feb 11, 2021

dreamwhisper commented Mar 9, 2021

kienstra commented Mar 9, 2021

kienstra commented Mar 9, 2021

kienstra May 3, 2021 • edited Loading

Choose a reason for hiding this comment

kienstra May 4, 2021

Choose a reason for hiding this comment

kienstra May 5, 2021

Choose a reason for hiding this comment

kienstra May 5, 2021

Choose a reason for hiding this comment

kienstra May 5, 2021

Choose a reason for hiding this comment

kienstra May 5, 2021

Choose a reason for hiding this comment

kienstra commented May 5, 2021

dreamwhisper left a comment

Choose a reason for hiding this comment

kienstra commented May 6, 2021

kienstra commented Feb 4, 2021 •

edited

Loading

kienstra Feb 4, 2021 •

edited

Loading

kienstra Feb 4, 2021 •

edited

Loading

kienstra Feb 4, 2021 •

edited

Loading

kienstra May 3, 2021 •

edited

Loading