Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include an example of blocks.getSaveElement use #8470

Closed
wants to merge 2 commits into from

Conversation

danielbachhuber
Copy link
Member

No description provided.

@danielbachhuber danielbachhuber added [Type] Developer Documentation Documentation for developers [Feature] Extensibility The ability to extend blocks or the editing experience labels Aug 3, 2018
@danielbachhuber danielbachhuber added this to the 3.5 milestone Aug 3, 2018
@danielbachhuber danielbachhuber requested a review from a team August 3, 2018 21:55
Copy link
Member

@aduth aduth left a comment

Choose a reason for hiding this comment

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

This sort of usage (and in fact, the filter itself) may be something to discourage, as if the plugin is ever to later to be deactivated, the user will be presented with the "Modified Externally" warning, since the attribute would be destroyed on subsequent re-saves.

At minimum, we should be very clear about this caution, or avoid documenting getSaveElement altogether.

@danielbachhuber
Copy link
Member Author

This sort of usage (and in fact, the filter itself) may be something to discourage, as if the plugin is ever to later to be deactivated, the user will be presented with the "Modified Externally" warning, since the attribute would be destroyed on subsequent re-saves.

Related #6878 (comment)

At minimum, we should be very clear about this caution, or avoid documenting getSaveElement altogether.

Updated in f2f1c56

if ( ! attributes.myCustomAttribute.length ) {
return element;
}
// Modifying nested JavaScript objects is pretty awful.
Copy link
Member

Choose a reason for hiding this comment

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

  • This should probably be using cloneElement to override props
  • Deep object assignment can be improved by using _.merge instead

Copy link
Member Author

Choose a reason for hiding this comment

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

Can you provide an example?

Copy link
Member

Choose a reason for hiding this comment

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

// Bad:
return _.assign( {}, element, { myprop: 'foo' } );

// Good:
return wp.element.cloneElement( element, { myprop: 'foo' } );

element = lodash.assign( {}, element, {
props: lodash.assign( {}, element.props, {
children: [
lodash.assign( {}, element.props.children[0], {
Copy link
Member

Choose a reason for hiding this comment

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

This will not assign data-custom-attribute when the image is assigned a URL. The deep override should be a signal of its fragility.

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't follow this either. Can you explain further?

Copy link
Member

Choose a reason for hiding this comment

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

The markup shape changes depending on whether the image block has a url attribute assigned.

Aside: It's maybe telling that this is an easy thing to overlook.

@danielbachhuber danielbachhuber modified the milestone: 3.5 Aug 6, 2018
@danielbachhuber danielbachhuber self-assigned this Aug 6, 2018
@danielbachhuber danielbachhuber added the [Status] In Progress Tracking issues with work in progress label Aug 6, 2018
@danielbachhuber
Copy link
Member Author

I probably won't have time to pick this back up this week, so assigning to myself to clean up early next.

@aduth
Copy link
Member

aduth commented Sep 13, 2018

Are you able to resume work here?

@aduth aduth added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Sep 13, 2018
@danielbachhuber
Copy link
Member Author

Are you able to resume work here?

I haven't been able to come back to this yet. The project work is still on my todo list though, so I'll pick up the documentation when I'm back on the project.

@danielbachhuber danielbachhuber deleted the get-save-element-example branch September 13, 2018 19:43
shramee added a commit to shramee/gutenberg that referenced this pull request Oct 16, 2020
Happened to need this for my project so thought I'd add example for this...
Old PR WordPress#8470
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Extensibility The ability to extend blocks or the editing experience [Status] In Progress Tracking issues with work in progress [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants