Gallery: Duplicate image IDs into easy-to-parse attribute #11540

mcsf · 2018-11-06T12:24:51Z

Description

Fixes #8193.
Would supersede #11212.
Prototyped during a call with @mtias.

Warning: yes, this is quite awful. I mainly want to close this unless I can be convinced this is a trade-off worth making.

This is yet another trade-off to allow easy parsing of galleries on the server. This functionality is expected by many, especially given the possibilities offered by the [gallery] shortcode, etc. A comprehensive set of server-side tools for deep block inspection isn't expected until WordPress 5.1, thus in the meantime measures such as this can make third-party developers' lives easier. See parent issue for more.

Conceptually, I don't like what this PR does, as it duplicates state. Indeed, Gallery has an attribute images, an array of image objects whose properties include id. This attribute is sourced in the block's HTML, however, based on elements' data attributes. This PR introduces an attribute ids which is not sourced and contains just the IDs extracted from images.

It highlights my concerns about state duplication:

that state needs to be kept in sync with arguably fragile techniques, such as overriding setAttributes to enforce the unidirectional images -> ids synchronisation;
that any piece that initialises a Gallery block needs to be aware of this duplication, as highlighted in the changes in transforms — but this would have to be replicated in any other block that offers a transform to a Gallery;
this last point would not be properly solved by letting the Gallery constructor set its duplicate attribute automatically, as this would be yet another case of self-induced block changes that put the user in a state of "stuck undo"; it would also break synchronisation if a user somehow isn't in Visual/Block mode upon transforming blocks.

aduth

I'm reasonably okay with this direction. If we have the IDs, I'd like to see images contain as little as possible which is not redundant with the id. I think that would mainly be captions? May even be possible to change attributes shape to ids and captions at that point. Though I suppose we'd probably want to limit such changes at this point in the development cycle.

The mention of a block "constructor" seems very similar to what we'd had early in Gutenberg with the function form of attributes, eventually removed due to its inability to interoperate with the backend (#1905).

aduth · 2018-11-12T15:31:54Z

packages/block-library/src/gallery/index.js

+					ids: {
+						type: 'array',
+						shortcode: ( { named: { ids } } ) => {
+							return ids.split( ',' );


ids is not guaranteed to be assigned, at which point this would throw.

aduth · 2018-11-12T15:56:26Z

eventually removed due to its inability to interoperate with the backend (#1905).

Funny enough we still had at least one lingering reference in our documentation 😄 See #11765

mcsf · 2018-11-15T13:20:59Z

packages/block-library/src/gallery/edit.js


 		this.state = {
 			selectedImage: null,
 		};
 	}

+	setAttributes( attributes ) {
+		if ( attributes.ids ) {
+			throw new Error( "Don't use this attribute, dangit." );


Note to self: even though this error should never be thrown, let's change the copy to something neutral and descriptive.

jorgefilipecosta

I did some polishing on this PR; it should be ready. I think this approach is a good tradeoff between providing server access to the ids and using our existing mechanisms.
I agree with @aduth, that removing the id data attribute from the image may even be a better path. But I'm not sure if it is something we can do now, and this path seems "safer."

antpb · 2018-11-15T23:04:48Z

@jorgefilipecosta seems it is failing tests. Can't see why when comparing your changes to the last success...

FAIL test/e2e/specs/links.test.js (54.639s)
  ● Links › allows autocomplete suggestions to be selected with the mouse
    expect(received).not.toBeNull()
    Received: null
      302 | 		// Expect that clicking on the autocomplete suggestion doesn't dismiss the link popover.
      303 | 		await firstSuggestion.click();
    > 304 | 		expect( await page.$( '.editor-url-popover' ) ).not.toBeNull();
          | 		                                                    ^
      305 | 
      306 | 		// Expect the url input value to have been updated with the post url.
      307 | 		const inputValue = await page.evaluate( () => document.querySelector( '.editor-url-input input[aria-label="URL"]' ).value );
      at Object._callee17$ (test/e2e/specs/links.test.js:304:55)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:62:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:288:22)
      at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:114:21)
      at asyncGeneratorStep (test/e2e/specs/links.test.js:15:103)
      at _next (test/e2e/specs/links.test.js:17:194)

aduth · 2018-11-15T23:26:31Z

@antpb This test has been very flakey lately. Trying rebuild..

antpb · 2018-11-16T16:24:50Z

that did it @aduth ! Thanks! Worth noting here, this PR will close #1451 as well. The main thing needed there is a friendly way to consume ids

mcsf

I suggested a couple of nit-picks, but LGTM

packages/block-library/src/gallery/index.js

mcsf · 2018-11-16T18:11:11Z

🚫 Actually, this still needs a deprecation for Gallery.

Co-Authored-By: jorgefilipecosta <jorge.costa@developer.pt>

jorgefilipecosta · 2018-11-19T14:30:42Z

🚫 Actually, this still needs a deprecation for Gallery.

Hi @mcsf, in my tests I did not find any valid gallery created on the previous version that becomes invalid after this changes.
What I found was that we did not automatically add ids attribute to previous existing galleries, in order to improve that I used isEligible and added a migration.
This improvement also adds some nice features e.g. if we remove an image in the code (delete its li element) this mechanism also deletes the id attribute from the array, basically the mechanism makes sure images.id and ids are always in sync even if changed using the code editor.
I'm not sure if the reason you referred the need for deprecation was this one, if that is not the case feel free to let me know and I will update the logic.

youknowriad

The code looks good to me, and I wasn't able to trigger the deprecation error as well.

antpb · 2018-11-19T16:27:58Z

I see a lot of green statuses here. 🙂 With @youknowriad last comment I feel good with us moving forward on merging this one. Thank you @mcsf ! Fixes: #1451 and #8193

mcsf · 2018-11-19T16:33:57Z

I'm not sure if the reason you referred the need for deprecation was this one, if that is not the case feel free to let me know and I will update the logic.

Actually, it was a quick phone-side comment and I didn't think that deeply, but this is great! Thanks for the work, @jorgefilipecosta!

selftripsdotru · 2019-02-10T09:26:57Z

Sorry, but problem is solved or not?

noisysocks · 2019-02-11T06:14:13Z

@selftripsdotru: Yes, this PR was merged and shipped as part of WordPress 5.0.

selftripsdotru · 2019-02-11T07:48:51Z

What is PR?
In the WordPress 5.0 or more, the problem is!!

selftripsdotru · 2019-02-11T07:50:42Z

How to get new IDs for galleries after export/import?

mcsf · 2019-02-11T08:48:32Z

What is PR?

A PR is a pull request, such as the one on this page. It means that this change has been incorporated in WordPress 5.0.

How to get new IDs for galleries after export/import?

For general help requests, please post in the support forum at https://wordpress.org/support/forum/how-to-and-troubleshooting/.

Technical help requests have their own section of the support forum at https://wordpress.org/support/forum/wp-advanced/.

You may also ask for technical support at https://wordpress.stackexchange.com/.

Please make sure you have checked the Handbook at https://wordpress.org/gutenberg/handbook before asking your question.

mtias requested a review from a team November 6, 2018 16:04

aduth reviewed Nov 12, 2018

View reviewed changes

mtias added this to the 4.4 milestone Nov 12, 2018

mcsf mentioned this pull request Nov 13, 2018

Gallery, Image: Move attributes to block boundary (JSON) #11212

Closed

4 tasks

youknowriad modified the milestones: 4.4, 4.5 Nov 15, 2018

mcsf commented Nov 15, 2018

View reviewed changes

mcsf assigned jorgefilipecosta Nov 15, 2018

mcsf and others added 4 commits November 15, 2018 16:27

[TRY] Gallery: Duplicate images' IDs into easy-to-parse attribute

482c773

typo fix

a4e6649

Fixed a check in shortcode transform; Handled the file transform.

7c8404a

Corrected fixtures and snapshots.

a5e25df

jorgefilipecosta force-pushed the fix/gallery-server-readable-ids branch 2 times, most recently from 542187a to 3108056 Compare November 15, 2018 18:55

jorgefilipecosta reviewed Nov 15, 2018

View reviewed changes

jorgefilipecosta force-pushed the fix/gallery-server-readable-ids branch from 3108056 to 7efb944 Compare November 15, 2018 19:03

Improved error message.

063f643

jorgefilipecosta force-pushed the fix/gallery-server-readable-ids branch from 7efb944 to 063f643 Compare November 15, 2018 19:18

antpb mentioned this pull request Nov 16, 2018

Importer: Image Blocks can end up in a crashed state after import #10535

Closed

mcsf commented Nov 16, 2018

View reviewed changes

gziolo added this to In Progress in Extensibility Nov 17, 2018

gziolo added [Priority] High Used to indicate top priority items that need quick attention [Status] In Progress Tracking issues with work in progress labels Nov 19, 2018

mcsf and others added 4 commits November 19, 2018 12:02

Update packages/block-library/src/gallery/index.js

3dc86a7

Co-Authored-By: jorgefilipecosta <jorge.costa@developer.pt>

Update packages/block-library/src/gallery/index.js

b93ec68

Co-Authored-By: jorgefilipecosta <jorge.costa@developer.pt>

Update packages/block-library/src/gallery/index.js

f244761

Co-Authored-By: jorgefilipecosta <jorge.costa@developer.pt>

Update packages/block-library/src/gallery/index.js

a973f0e

Co-Authored-By: jorgefilipecosta <jorge.costa@developer.pt>

jorgefilipecosta force-pushed the fix/gallery-server-readable-ids branch 2 times, most recently from f30b663 to 1815336 Compare November 19, 2018 13:03

Add deprecation logic.

526b956

jorgefilipecosta force-pushed the fix/gallery-server-readable-ids branch from 1815336 to 526b956 Compare November 19, 2018 13:06

update fixtures

98387a0

youknowriad approved these changes Nov 19, 2018

View reviewed changes

antpb merged commit e601299 into master Nov 19, 2018

Extensibility automation moved this from In Progress to Done Nov 19, 2018

antpb mentioned this pull request Nov 19, 2018

Gallery: figure out way to fallback to shortcode #1451

Closed

mcsf deleted the fix/gallery-server-readable-ids branch November 19, 2018 16:30

gziolo mentioned this pull request Feb 7, 2019

Gallery shortcode fallback to respect post_gallery filter #10392

Closed

gziolo mentioned this pull request May 7, 2019

Testing: Add integration tests for blocks with deprecations #15268

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gallery: Duplicate image IDs into easy-to-parse attribute #11540

Gallery: Duplicate image IDs into easy-to-parse attribute #11540

mcsf commented Nov 6, 2018 •

edited

aduth left a comment

aduth Nov 12, 2018

aduth commented Nov 12, 2018

mcsf Nov 15, 2018

jorgefilipecosta left a comment

antpb commented Nov 15, 2018

aduth commented Nov 15, 2018

antpb commented Nov 16, 2018

mcsf left a comment

mcsf commented Nov 16, 2018

jorgefilipecosta commented Nov 19, 2018

youknowriad left a comment

antpb commented Nov 19, 2018

mcsf commented Nov 19, 2018

selftripsdotru commented Feb 10, 2019

noisysocks commented Feb 11, 2019

selftripsdotru commented Feb 11, 2019

selftripsdotru commented Feb 11, 2019 •

edited

mcsf commented Feb 11, 2019

Gallery: Duplicate image IDs into easy-to-parse attribute #11540

Gallery: Duplicate image IDs into easy-to-parse attribute #11540

Conversation

mcsf commented Nov 6, 2018 • edited

Description

aduth left a comment

Choose a reason for hiding this comment

aduth Nov 12, 2018

Choose a reason for hiding this comment

aduth commented Nov 12, 2018

mcsf Nov 15, 2018

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

antpb commented Nov 15, 2018

aduth commented Nov 15, 2018

antpb commented Nov 16, 2018

mcsf left a comment

Choose a reason for hiding this comment

mcsf commented Nov 16, 2018

jorgefilipecosta commented Nov 19, 2018

youknowriad left a comment

Choose a reason for hiding this comment

antpb commented Nov 19, 2018

mcsf commented Nov 19, 2018

selftripsdotru commented Feb 10, 2019

noisysocks commented Feb 11, 2019

selftripsdotru commented Feb 11, 2019

selftripsdotru commented Feb 11, 2019 • edited

mcsf commented Feb 11, 2019

mcsf commented Nov 6, 2018 •

edited

selftripsdotru commented Feb 11, 2019 •

edited