Auto-slug block and field names, make Repeater work #51

kienstra · 2020-12-03T00:59:54Z

Updated December 16th

Tickets

GF-2518: Auto-slug for block name
GF-2519: Auto-slug for field names
GF-2507: Settings for Repeater
GF-2508: Add / Remove Sub-fields
GF-2509: Move / Resize Sub-fields
GF-2510: Sub-field JSON data
GF-2511: Save sub-field data

Changes

Enables Repeater sub_fields
When there is no block name (slug), this sets it when entering the block title:

Testing instructions

Follow 'Testing Instructions' 1-5 in https://github.com/studiopress/genesis-custom-blocks-pro/pull/16#issue-515954659
Test auto-slugging for the block name (GF-2518):
Expected: if you click somewhere else and edit the title again, it shouldn't auto-slug anymore
Test auto-slugging for the field name (GF-2519):
Expected: if you click somewhere else and edit the Field Label again, it shouldn't auto-slug anymore
Change a field to 'Repeater'
Expected: these 3 settings appear (GF-2507):
Test adding and deleting Repeater sub_fields (GF-2508):
Test moving and resizing Repeater sub_fields (GF-2509):
Try to break any of the above 😄

Maybe revisit some of this if there are bugs, but a lot of this is for the block editor, not for an editor that doesn't use blocks.

Sometimes, ref.current doesn't have an ownerDocument property. Then, it's not possible to get its properties.

Needed to import an NPM package.

Like how the previous editor worked, so the user will enter the field name right away.

kienstra · 2020-12-03T23:59:16Z

Like in the previous editor, this focuses the field label <input> when adding a new field:

On editing the field label for a new field, auto-slug the field name.

Even on blurring, allow autoslugging the next time there's a change

There's no need for a rerender on changing this. So don't call useState().

getFieldIcon() gets the icon, with a filter.

We might have to use <FieldsGrid> in another component, so move the parts that won't be needed in the new one.

kienstra · 2020-12-07T06:08:12Z

The sub_fields now display, though there's a lot of work left with them:

This allows passing a parentName, which will mark this as a sub_field. So on clicking a sub_field, it will set a name of the sub_field, and a parentName of the parent field.

kienstra · 2020-12-09T23:04:56Z

Here's the current editor:

Add a warning on trying to exit with unsaved changes.

There's still a lot of work needed for sub_fields, though.

kienstra · 2020-12-16T02:59:50Z

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

-			return;
-		}
-
-		// A hack to remove blocks from the edited entity.


The forked <EditorProvider> removes the need for this hack.

kienstra · 2020-12-16T03:08:54Z

js/src/edit-block/components/fields-grid.js

 												>
-													<button


This diff is mainly from indentation.

kienstra · 2020-12-16T03:12:53Z

js/src/edit-block/components/keywords-section.js

+				return [];
+			}
+
+			return block.keywords.filter( ( keyword ) => Boolean( keyword ) );


The previous editor sometimes saved block.keywords as [ '' ], which looked like:

So this .filter() removes '' keyword values.

kienstra · 2020-12-16T03:15:08Z

js/src/edit-block/components/location-buttons.js

+ * @param {LocationButtonProps} props
+ * @return {React.ReactElement} The location buttons.
+ */
+const LocationButtons = ( {


Here's where this appears:

It looks like this didn't pass anything that was needed.

kienstra · 2020-12-16T03:58:48Z

js/src/edit-block/components/field-settings.js

 				? control.settings.map( ( setting, index ) => {
+					if ( field.hasOwnProperty( 'parent' ) && 'location' === setting.name ) {


This prevents changing the location of a sub_field, as it's inside a field that has a location:

kienstra · 2020-12-16T04:07:39Z

php/Blocks/Loader.php

@@ -189,7 +189,7 @@ protected function register_block( $block_name, $block ) {
 		$block_name = str_replace( '_', '-', $block_name );

 		// register_block_type doesn't allow slugs starting with a number.
-		if ( is_numeric( $block_name[0] ) ) {
+		if ( isset( $block_name[0] ) && is_numeric( $block_name[0] ) ) {


Not related, but found a PHP warning or error when testing.

A type should ideally only be defined in one place, and other files should import them.

kienstra · 2020-12-16T07:44:45Z

js/src/edit-block/components/field-panel.js

+							} }
+							onBlur={ () => {
+								if ( didAutoSlug.current ) {
+									setIsNewField( false );


On blurring this <input>, it should prevent auto-slugging again.

kienstra · 2020-12-16T07:48:37Z

js/src/edit-block/components/fields-grid.js

+									</div>
+									{ null === parentField && 'repeater' === field.control
+										? (
+											<FieldsGrid


A repeater also has a grid of fields. So it recursively renders this component:

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

js/src/edit-block/helpers/getSettingsComponent.js

mikemcalister

This is more of a UI and frontend test than a deep code dive, but everything was working well in my experiments.

Focus on title works with new block creation
Auto-slug on block and field name works
New settings (help, min/max rows) showing on repeater field
Adding and deleting repeater fields works as expected
Resizing repeater fields wasn't working initially, but there was no console error. I did a rebuild and they do work now. Seems to work well with no console errors.

Great work, @kienstra! I'm loving these improvements.

kienstra · 2020-12-17T18:14:00Z

@mikemcalister,
Thanks so much for testing this and your details about how it went. I'll keep an eye out for resizing repeater fields, also.

kienstra added 10 commits December 2, 2020 17:53

Copy PostTitle from Gutenberg into this, mainly without change

24d968b

Delete functions and constants that are probably not needed

1991a24

Maybe revisit some of this if there are bugs, but a lot of this is for the block editor, not for an editor that doesn't use blocks.

Fix an error from ownerDocument being undefined

ba14e99

Sometimes, ref.current doesn't have an ownerDocument property. Then, it's not possible to get its properties.

Fix an issue where it did not focus on new posts

9ee32d8

Needed to import an NPM package.

Allow autoslugging, clean up <Main>

a034f85

Allow autoslugging if the slug (name) ever gets deleted

ef86945

Actually use the autoslugging function

8957e96

Install the types of classnames

3452494

Merge branch 'feature/react-ui' into add/editor-ui-autoslugging

03517c6

On adding a new field, focus it

fdddd33

Like how the previous editor worked, so the user will enter the field name right away.

kienstra added 4 commits December 3, 2020 21:09

Auto-slug the field name

25a2c50

On editing the field label for a new field, auto-slug the field name.

Allow autoslugging if it wasnt done yet

99dee8b

Even on blurring, allow autoslugging the next time there's a change

useRef() instead of useState() for whether slugging happened

7fccb1f

There's no need for a rerender on changing this. So don't call useState().

Set didAutoSlug.current to false outside of conditional

4be9f73

kienstra changed the title ~~Autoslug block name (slug)~~ Autoslug block and field names Dec 4, 2020

kienstra added 4 commits December 4, 2020 11:16

Use a ref for autoslugging the title

4e83878

Add field icons, with a helper function

df8ef7e

getFieldIcon() gets the icon, with a filter.

Add a typedef for Field so TS in VS Code works better

f4b8c10

Move buttons for location to <Main>

1c505e7

We might have to use <FieldsGrid> in another component, so move the parts that won't be needed in the new one.

kienstra changed the title ~~Autoslug block and field names~~ Autoslug block and field names, allow subfields Dec 7, 2020

Move the sub_fields above the buttons in the structure

cd237dd

kienstra added 4 commits December 7, 2020 13:14

Merge branch 'feature/react-ui' into add/editor-ui-autoslugging

03c08a3

Add some unit test cases

0e12439

Move getField() higher so it works well in the deps []

29179e2

Allow using sub_fields by making selectedField an object

633b333

This allows passing a parentName, which will mark this as a sub_field. So on clicking a sub_field, it will set a name of the sub_field, and a parentName of the parent field.

kienstra added 2 commits December 9, 2020 17:18

From Gutenberg, add unsaved changes warning

cfd9f34

Add a warning on trying to exit with unsaved changes.

Allow adding sub_fields to repeater control

7e5ab0a

There's still a lot of work needed for sub_fields, though.

kienstra commented Dec 16, 2020

View reviewed changes

js/src/edit-block/components/fields-grid.js

>

<button

Copy link

Contributor Author

kienstra Dec 16, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This diff is mainly from indentation.

kienstra commented Dec 16, 2020

View reviewed changes

Remove withRegistryProvider()

0d01b83

It looks like this didn't pass anything that was needed.

kienstra commented Dec 16, 2020

View reviewed changes

kienstra changed the title ~~Autoslug block and field names, allow subfields~~ Autoslug block and field names, make Repeater work Dec 16, 2020

Add tags to <Editor>, mainly import() them

2950c2f

A type should ideally only be defined in one place, and other files should import them.

kienstra commented Dec 16, 2020

View reviewed changes

kienstra added 2 commits December 16, 2020 01:59

Some JSDoc fixes, maybe from copypasta

926e8ef

More JSDoc fixes, like using import()

20001f6

kienstra marked this pull request as ready for review December 16, 2020 09:11

kienstra requested review from dreamwhisper, BMO-tech, mikemcalister, johnstonphilip and marksabbath December 16, 2020 09:12

kienstra changed the title ~~Autoslug block and field names, make Repeater work~~ Auto-slug block and field names, make Repeater work Dec 16, 2020

johnstonphilip reviewed Dec 16, 2020

View reviewed changes

js/src/edit-block/components/editor-provider.js Show resolved Hide resolved

johnstonphilip reviewed Dec 16, 2020

View reviewed changes

js/src/edit-block/helpers/getSettingsComponent.js Show resolved Hide resolved

kienstra requested review from RobStino and lukecarbis December 16, 2020 22:54

mikemcalister approved these changes Dec 17, 2020

View reviewed changes

johnstonphilip approved these changes Dec 17, 2020

View reviewed changes

dreamwhisper approved these changes Dec 17, 2020

View reviewed changes

kienstra merged commit 9711172 into feature/react-ui Dec 17, 2020

kienstra deleted the add/editor-ui-autoslugging branch December 17, 2020 21:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auto-slug block and field names, make Repeater work #51

Auto-slug block and field names, make Repeater work #51

kienstra commented Dec 3, 2020 •

edited

Loading

kienstra commented Dec 3, 2020

kienstra commented Dec 7, 2020

kienstra commented Dec 9, 2020

kienstra Dec 16, 2020

kienstra Dec 16, 2020

kienstra Dec 16, 2020 •

edited

Loading

kienstra Dec 16, 2020 •

edited

Loading

kienstra Dec 16, 2020 •

edited

Loading

kienstra Dec 16, 2020

kienstra Dec 16, 2020

kienstra Dec 16, 2020 •

edited

Loading

mikemcalister left a comment

kienstra commented Dec 17, 2020

		? control.settings.map( ( setting, index ) => {
		if ( field.hasOwnProperty( 'parent' ) && 'location' === setting.name ) {

Auto-slug block and field names, make Repeater work #51

Auto-slug block and field names, make Repeater work #51

Conversation

kienstra commented Dec 3, 2020 • edited Loading

Tickets

Changes

Testing instructions

kienstra commented Dec 3, 2020

kienstra commented Dec 7, 2020

kienstra commented Dec 9, 2020

kienstra Dec 16, 2020

Choose a reason for hiding this comment

kienstra Dec 16, 2020

Choose a reason for hiding this comment

kienstra Dec 16, 2020 • edited Loading

Choose a reason for hiding this comment

kienstra Dec 16, 2020 • edited Loading

Choose a reason for hiding this comment

kienstra Dec 16, 2020 • edited Loading

Choose a reason for hiding this comment

kienstra Dec 16, 2020

Choose a reason for hiding this comment

kienstra Dec 16, 2020

Choose a reason for hiding this comment

kienstra Dec 16, 2020 • edited Loading

Choose a reason for hiding this comment

mikemcalister left a comment

Choose a reason for hiding this comment

kienstra commented Dec 17, 2020

kienstra commented Dec 3, 2020 •

edited

Loading

kienstra Dec 16, 2020 •

edited

Loading

kienstra Dec 16, 2020 •

edited

Loading

kienstra Dec 16, 2020 •

edited

Loading

kienstra Dec 16, 2020 •

edited

Loading