Skip to content
This repository has been archived by the owner on Nov 6, 2022. It is now read-only.

[WIP] React refactoring of the 'Edit Block' UI #478

Closed
wants to merge 30 commits into from

Conversation

kienstra
Copy link
Collaborator

@kienstra kienstra commented Nov 24, 2019

WIP

There's a lot of work remaining, including porting the previous PHP rendering and JS logic

Closes #469

It looks like it is possible to
edit the post content directly from a meta box.
Now, this meta box is rendered with React.
There's still a lot of work left,
including porting much of the PHP and JS into this.
This can overwrite what's saved in the
main block fields meta box.
Also, the Block Properties meta box
might have to be rendered by React,
as the 'Slug' field gets its initial value from
the post title.
@kienstra
Copy link
Collaborator Author

Here's the current state:

current-editor

Port some of the PHP from render_fields_meta_box()
into the React component.
Still, it doesn't actuall add fields,
and doesn't save anything.
@kienstra
Copy link
Collaborator Author

More PHP ported

react-rendered

@@ -1 +0,0 @@
// Import components.
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

This didn't look to be used.

* @return array
*/
public function save_block( $data ) {
if ( ! isset( $_POST['post_ID'] ) ) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

The saving will probably be handled client-side now.

Add a helper function to get the post content.
Port render_fields_meta_box_row()
into the component <FieldRow>,
and render a row.
@kienstra
Copy link
Collaborator Author

kienstra commented Nov 24, 2019

This now has a basic way of getting the post content on the client-side and rendering field rows from it.

But so far, this only works with existing blocks. I still need to add the ability to add rows. And editing fields doesn't work yet.

rendering-existing-blocks

webpack.config.js Outdated Show resolved Hide resolved
I copied these from BlockLabEditor,
so update them for the new component.
@lukecarbis lukecarbis changed the title React refactoring of the 'Edit Block' UI [WIP] React refactoring of the 'Edit Block' UI Nov 24, 2019
There were conflicts in:
php/post-types/class-block-post.php
tests/php/unit/post-types/test-class-block-post.php
These were trivial, mainly from the [] array syntax.
tests/js/jest.config.js is mainly copied from the AMP
plugin, though several values are removed.
This should begin the work for Jest unit tests,
and new helper functions should all have tests.
Do npm install before running
npm run lint:js.
There's a comment for loader/index.js.
But that probably fits better in that file.
There are now 2 directories in that::
block-editor/
block-lab-editor/
This might be changed, but I think it's a first
step in making the directories a little easier
to understand.
There's no need to look for
Jest tests in the js/build directory.
There's already a getBlockAttributes() function in Gutenberg,
so give this a differernt name.
It looks like .gitkeep is only so that
GIT keeps the directory, even though it's empty.
Now that jest.config.js is in the directory,
it's not empty anymore.
@todo: consider if the compare function
is still needed.
There wasn't a test
for this before.
Also, add parameters for it.
Test not registering any block,
registering 1, and registering 2.
Test not registering any block,
registering 1, and registering 2.
In this case, there is no need
to pluralize this.
Copy Rob's markup for the fields,
and the CSS file.
Also, add a unit test for that.
@todo: test the 'happy path' of that function.
When attempting to save field values,
it looks like the block editor might have been
overwriting the values
It looks like the updateEditorSettings()
call wasn't actually disabling rich text editing.
It looks like the updateEditorSettings()
call wasn't actually disabling rich text editing.
Also, add a unit test for it.
@TOOD: use this in the component.
This is used in 2 functions,
so put it in a single function.
The first field will be 'new-field', the next 'new-field-1', etc..
This mainly follows the previous implementation.
For example, 'new-field-4' will be
'New Field 4'.
To make it easier to import the helper functions,
like with import { foo } from '../helpers';
Add a method toggleEditArea()
to enable opening and closing this.
There were several conflicts,
including in:
js/blocks/components/block-lab-inspector.js
js/blocks/components/edit.js
@kienstra
Copy link
Collaborator Author

Current State

There's a lot of work left. But it's now possible to add fields, enter basic values, 'autoslug' the name, and save the field.

react-ui

@kienstra kienstra closed this Feb 4, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Refactor 'Edit Block' UI to use React
1 participant