Add the 'Block Settings' panel #43

kienstra · 2020-11-10T04:52:30Z

Changes

Uses Rob's markup and CSS
Adds a 'Block Settings' panel:

Testing instructions

composer install && npm ci && npm run dev
wp post create --post_type='genesis_custom_block' --post_title='Test UI' --post_excerpt='' --post_content='{"genesis-custom-blocks\/test-ui":{"name":"test-ui","title":"Test UI","excluded":[],"icon":"genesis_custom_blocks","category":{"slug":"common","title":"Common Blocks","icon":null},"keywords":["baz"],"fields":{"text":{"name":"text","label":"Text","control":"text","type":"string","order":0,"location":"editor","width":"100","help":"","default":"","placeholder":"","maxlength":null}}}}'
It should say something like Success! Created post 8
Go to the URL for that post: https://your-wp-local/wp-admin/post.php?post=8&action=edit
Expected: It should initially look like this:
Expected: you can edit, undo, and save the 'Slug', 'Icon', 'Category', and 'Keywords', and 'Post Types':
The scope of this PR is mainly the 'Block Settings' panel. There is still a lot of work needed in the editor.

Using Rob's HTML and CSS, begin this panel and add a component test for it.

The PHPUnit test jobs failed with a message that the GD extension is not available.

From doing: composer install --dev ext-gd

For now at least, enqueue the 'wp-components' stylesheet. Eventually, it'd be good to import it from node_modules, so we know exactly what version is used. https://github.com/WordPress/gutenberg/blob/f152a28c5331d56230b716ee8b948b9a56590929/packages/components/README.md

…te one

On adding a new category, display it in the <select>.

kienstra · 2020-11-11T07:11:44Z

Here's the current display:

Maybe refactor getFullBlock() into a helper function.

#43

So two hooks can use this.

This will make it easier to use them in the 'Edit Block' UI.

kienstra · 2020-11-12T03:59:05Z

js/src/common/icons/account-balance.js

@@ -0,0 +1,25 @@
+/**


All of these files in common/icons/ are just ported from assets/icons.json. There's no intended change.

This is working, but it needs a lot of styling, some of which can be ported over.

kienstra · 2020-11-12T05:41:50Z

You can now change icons:

Of course, I need to style this. Some of the styling from the previous editor should help.

kienstra · 2020-11-12T20:55:34Z

Icon UI

Hi @RobStino and @lukecarbis,
Do you think the icon UI should be mainly the same as the previous one?

The new UI mainly looks like that, I just need to add styling.

I think the previous UI is good 😄

They use contexts, so they don't need to be as JSX in the same component.

From getblocklab/react-ui#7

I had used something a little different, making the <button> lower in the tree.

Using Tailwind utility classes, instead of custom classes.

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

Add a unit test for snakeCaseToPascalCase()

The icons will only be available via JavaScript.

kienstra · 2020-11-13T06:06:05Z

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

 	return (
 		<>
 			<GcbInspector blockProps={ blockProps } block={ block } />
 			<div className={ className } key={ `form-controls-${ block.name }` } >
 				{ isSelected ? (
 					<div className="block-form">
-						<h3 dangerouslySetInnerHTML={ { __html: icons[ block.icon ] + ' ' + block.title } } />
-						<FormControls blockProps={ blockProps } block={ block } />


<FormControls> was just a wrapper for <Fields>, so this simply uses <Fields>

kienstra · 2020-11-13T06:06:53Z

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

 */
-const Fields = ( { fields, parentBlock, parentBlockProps, rowIndex } ) => {


This diff is mainly from indenting one level more, there's very little changed.

kienstra · 2020-11-13T06:14:51Z

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

-		if ( ! fullBlock[ blockNameWithNamespace ].fields ) {
-			fullBlock[ blockNameWithNamespace ].fields = [];
-		}
+	const { controls, field, changeControl, changeFieldSetting } = useField();


These deletions are mainly moved to the useField hook.

This will be true initially, so it should be easier to grasp.

kienstra · 2020-11-13T06:28:38Z

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

 					{ __( 'Field', 'genesis-custom-blocks' ) }
 				</button>
 			</div>
-			<FieldPanel />
+			{ displayFieldPanel ? <FieldPanel /> : <BlockPanel /> }


Here's the <Side> component:

kienstra · 2020-11-13T06:29:34Z

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

 					{ __( 'Field', 'genesis-custom-blocks' ) }
 				</button>
 			</div>
-			<FieldPanel />
+			{ displayBlockPanel ? <BlockPanel /> : <FieldPanel /> }


Here's the <Side> component:

kienstra · 2020-11-13T06:31:36Z

php/Util.php

-		 *
-		 * @param array $icons The available icons.
-		 */
-		return apply_filters( 'genesis_custom_blocks_icons', $icons );


Todo: update the documentation for this removed filter when this is released.

These are the post types where the block will display.

It is actually a slug, so this is more semantic.

kienstra · 2020-11-13T18:37:38Z

css/edit-block.css

-	display: block;
-	margin-top: 0.5rem;
+.components-form-token-field__label {
+	font-size: .875rem;


Copied from Gutenberg, for the 'Keywords' section

kienstra · 2020-11-13T18:40:50Z

assets/icons.json

@@ -1,121 +0,0 @@
-{


This has all of the GCB block icons:

It worked fine as a .json file before, but now that we have a React-based editor, these are all moved to their own React component files.

kienstra · 2020-11-13T18:42:55Z

js/src/block-editor/components/form-controls.js

- */
-const FormControls = ( { blockProps, block } ) => {
-	return (
-		<Fields


This file is deleted because it's not really needed, it's just a wrapper for <Fields>

They all have the same markup in <svg>, so no need to copy it every time.

kienstra · 2020-11-13T19:03:37Z

php/PostTypes/BlockPost.php

@@ -402,7 +402,7 @@ public function save_draft_button() {
 	public function render_properties_meta_box() {
 		$post  = get_post();
 		$block = new Block( $post->ID );
-		$icons = genesis_custom_blocks()->get_icons();
+		$icons = [];


Most of this file will be deleted when this editor redesign is done. It mainly renders the editor and handles its data.

From doing npm run lint:js:fix

kienstra · 2020-11-13T19:41:41Z

Hi @johnstonphilip, @BMO-tech, and @mikemcalister,
Could you please review this PR for GF-2532?

Most of the 173 changed files are <svg> elements ported to their own files 😄

The main scope of this is the Block Settings panel.

No hurry reviewing this, it's Friday 🤣

Thanks!

dreamwhisper

Expected: you can edit, undo, and save the 'Slug', 'Icon', 'Category', and 'Keywords', and 'Post Types':

This is all working perfectly for me.

kienstra · 2020-11-18T00:10:18Z

This is all working perfectly for me.

Nice, thanks so much for testing this!

kienstra added 10 commits November 9, 2020 22:43

Thanks to Rob's work, add part of the 'Block Setings' panel

bb80fb4

Using Rob's HTML and CSS, begin this panel and add a component test for it.

Add the gd extension in response to failed CircleCI jobs

3b6648d

The PHPUnit test jobs failed with a message that the GD extension is not available.

Install the extension via a docker command

5c92af1

Try passing 2 extensions to the command

78434c3

Add the gd extension to Composer

2795863

Add the gd extension to composer lock

9f399cd

From doing: composer install --dev ext-gd

Add more assertions in <Side> component test

5a55820

Add a <select> for the category, though still need to be able to crea…

99c6334

…te one

Handle a non-default category

70ad64d

On adding a new category, display it in the <select>.

kienstra added 6 commits November 11, 2020 14:07

Add hooks for blocks and categories

0aab1d0

Maybe refactor getFullBlock() into a helper function.

Revert changes to composer.json and composer.lock

91bc3d4

Install libpng-dev in response to CircleCI error

4cbbd5b

#43

Decompose into a function getBlock()

f7860cc

So two hooks can use this.

Add JSDoc blocks to the contexts

e3a1e6a

Port the icons to traditional .js files

4d9b591

This will make it easier to use them in the 'Edit Block' UI.

kienstra commented Nov 12, 2020

View reviewed changes

Allow selecting a new icon

65e7387

This is working, but it needs a lot of styling, some of which can be ported over.

kienstra added 4 commits November 12, 2020 15:41

Extract sections into components

b1059f2

They use contexts, so they don't need to be as JSX in the same component.

Fix JSDoc return descriptions, other formatting fixes

299a754

Apply Rob's markup and CSS for the 'Icon' picker

15b1382

From getblocklab/react-ui#7

Use Rob's markup for the <button>

448889a

I had used something a little different, making the <button> lower in the tree.

kienstra mentioned this pull request Nov 13, 2020

Add icon picker field for block settings getblocklab/react-ui#7

Open

Improve the styling of adding a category

bac0391

Using Tailwind utility classes, instead of custom classes.