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.

Sign up for GitHub

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

Fixes Caption Loss with Gallery, saves captions using rest API #16340

Closed
wants to merge 1 commit into from
Closed

Fixes Caption Loss with Gallery, saves captions using rest API #16340

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion packages/block-library/src/gallery/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
import { every, filter, forEach, map } from 'lodash';
import { every, filter, forEach, map, debounce } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -28,6 +28,7 @@ import { Component } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
import { withSelect } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';

/**
* Internal dependencies
Expand Down Expand Up @@ -59,6 +60,7 @@ class GalleryEdit extends Component {
this.onRemoveImage = this.onRemoveImage.bind( this );
this.onUploadError = this.onUploadError.bind( this );
this.setImageAttributes = this.setImageAttributes.bind( this );
this.saveImageAttributes = debounce( this.saveImageAttributes.bind( this ), 1000 );
this.setAttributes = this.setAttributes.bind( this );

this.state = {
Expand Down Expand Up @@ -165,6 +167,9 @@ class GalleryEdit extends Component {
if ( ! images[ index ] ) {
return;
}
if ( images[ index ].id ) {
this.saveImageAttributes( images[ index ].id, attributes );
}
setAttributes( {
images: [
...images.slice( 0, index ),
Expand All @@ -177,6 +182,16 @@ class GalleryEdit extends Component {
} );
}

saveImageAttributes( id, attributes ) {
const data = new window.FormData();
forEach( attributes, ( ( value, key ) => data.append( key, value ) ) );
apiFetch( {
path: '/wp/v2/media/' + id,
body: data,
method: 'POST',
} );
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Why should we do so in the Gallery and not in the Image. I think the decision has been made in Gutenberg to not persist the caption into the Media Library because it's a confusing flow if you have the same image in multiple posts, but you want the caption to be different.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hey @youknowriad, when I worked on this and pushed this I wasn't aware of that decision, I was only trying to be helpful. I tried to read up on what others had posted about this and provide a possible solution that made sense to me. You can close this if you want.

Wherever that decision was made it seems to me like its a more confusion workflow with it not syncing with the media library. Especially when you edit the gallery and lose your captions. ¯_(ツ)_/¯

Copy link
Contributor

Choose a reason for hiding this comment

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

yeah, I added the "Needs Design Feedback" to get some opinions. I highly appreciate your willingness to contribute. I'm hoping we could find some ways to improve the flows there.


componentDidMount() {
const { attributes, mediaUpload } = this.props;
const { images } = attributes;
Expand Down