"Contributors" styles

[coreymckrill]

The design specifies color and font size that depends on how long the list of contributors is:

It appears (for the 5.9 release anyway) that the list of contributors is just output in a single paragraph block. So perhaps these three "breakpoint" styles should just be implemented as block variations for the paragraph block?

[ryelle]

Maybe it should be a custom block that uses the contributors API endpoint? (like core does for /credits.php)

[coreymckrill]

I could get behind that idea...

With something like credits, it seems like we'd want the list of names to actually be inserted into the post content, instead of it being a dynamic block whose output comes from PHP. This would be beneficial because A) the results would be cached in post content, so less calls to the API, and B) the names would still be there if the API ever changed.

But maybe the block would have UI in the editor for "refreshing" the name list, if e.g. the contributor list gets updated later, which would remove and replace the list of names with the results of a new API call (although I guess you could just remove the block and re-add it?)

[coreymckrill]

🤔 It looks like it might not be possible to use the API endpoint for every release post. The problem is that the API only stores credits data for major releases, and treats minor releases as having the same set of contributors. So the credits list for 5.9.0 and for 5.9.x are the same.

Currently in release posts on the News site, minor versions, betas, and RCs only give props to the contributors who contributed for that particular release, rather than the entire major version.

I also learned that the HTML list of contributors that currently gets pasted into release posts is generated by a bin script that exists on wporg sandboxes, and basically parses a git log to find all the users. I don't think there's a good way to automate that at this point.

So, I think we're back to either creating a custom style for the Paragraph block, or creating a simple "Props" block. Given that the list of names still has to get generated from a script, whether or not its marked up with HTML or not, a custom style seems like the best choice.

[coreymckrill]

Ok, I wasn't thorough enough in my investigation before. Some release posts use a [wpcredits] shortcode (mostly the major version release posts). Others use a block of HTML generated by a sandbox script.

So we may be able to make a block version of that shortcode. But I think the first step is to register some block styles on the paragraph block that will apply a class like is-style-wporg-props-medium to the paragraph element. Then we can make sure that the shortcode adds that class to its output so that the styles get applied (the Shortcode block doesn't get rendered with a container element, so I suspect we can't register block styles for it). There are three different variations of the style (see screenshot above) depending on the length of the props list, so we may also need to add a parameter to the shortcode to account for that.

[iandunn]

the Shortcode block doesn't get rendered with a container element, so I suspect we can't register block styles for it)

We added a p wrapper in https://meta.trac.wordpress.org/changeset/11344/ to fix #87, so I'm guessing it's just the old manual ones that don't have it.

[coreymckrill]

Oh yeah, they get a p wrapper from the shortcode render itself. I just mean if you add a Shortcode block to the post content with [wpcredits] inside it, you don't get something like <div class="wp-block-shortcode">{shortcode content}</div> so you can't really do a register_block_style() call for it.

[iandunn]

Ah, I see 👍🏻

[coreymckrill]

The way the design is now, the usernames are supposed to have a dot/bullet between each one. This could be accomplished with something like an :after style rule. However, the current HTML generated by the shortcode and sandbox script separates each username with a comma. Having both a comma and a bullet would look pretty weird.

One way to visually fix it might be to have the paragraph text be the same color as the background, so it's essentially hidden, and then have anchor tags within the paragraph have the correct (white) text color. Then the only weirdness would be at the end of the list of props where the last username is prefixed with an "and", so there would be kind of a big gap between the last two items.

Another potential fix would be to change the output of the shortcode to not have commas or the final "and" (maybe change it to a bulleted list that we can then style so list items are inline?), but that wouldn't address older posts that have the script-generated list.

Thoughts @beafialho @iandunn ?

[tellyworth]

What about adding a shortcode argument, so [wpcredits separator="•"] works for the new posts, and the old ones are unchanged?

[iandunn]

I like that better, since the text/background match feels pretty hacky and might be misinterpreted as spam by search engines.

The shortcode could also take a bool arg that determines whether or not the "and" is added. Those new args could add classes to the containing p that we could target w/ styles.

IMO it's fine to leave older posts alone, but I don't feel strongly.

[beafialho]

What about adding a shortcode argument, so [wpcredits separator="•"] works for the new posts, and the old ones are unchanged?

This also seems better to me because of the hacky/spam point noted by @iandunn. I'd like to use [wpcredits separator="·"] instead for a more minimal separator.

[coreymckrill]

After merging #363 and updating the shortcode, here's what the three sizes of contributor blocks look like in action:

• Short: https://wordpress.org/news/2022/03/wordpress-5-9-2-security-maintenance-release/
• Medium: https://wordpress.org/news/2022/02/wordpress-5-9-1-maintenance-release/
• Long: https://wordpress.org/news/2022/01/josephine/

cc @beafialho

[beafialho]

Uh oh, I realized now I missed this ping @coreymckrill... All these sizes are looking great. Thank you all for your hard work on this!