This repository has been archived by the owner on Nov 6, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 64
[WIP] React refactoring of the 'Edit Block' UI #478
Closed
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
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
commented
Nov 24, 2019
@@ -1 +0,0 @@ | |||
// Import components. |
There was a problem hiding this comment.
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.
kienstra
commented
Nov 24, 2019
* @return array | ||
*/ | ||
public function save_block( $data ) { | ||
if ( ! isset( $_POST['post_ID'] ) ) { |
There was a problem hiding this comment.
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
commented
Nov 24, 2019
I copied these from BlockLabEditor, so update them for the new component.
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.
kienstra
force-pushed
the
update/469-react-refactoring
branch
from
December 30, 2019 01:23
66acd25
to
8350ee6
Compare
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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WIP
There's a lot of work remaining, including porting the previous PHP rendering and JS logic
Closes #469