WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#34663 closed task (blessed) (fixed)

4.4 About Page

Reported by: wonderboymusic Owned by: ocean90
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.4
Component: Help/About Keywords: has-patch
Focuses: Cc:
PR Number:

Description

Tracking ticket.

Attachments (21)

34663.diff (10.3 KB) - added by DrewAPicture 4 years ago.
34663.2.diff (9.9 KB) - added by DrewAPicture 4 years ago.
34663.3.diff (15.5 KB) - added by ryelle 4 years ago.
34663.4.diff (15.5 KB) - added by DrewAPicture 4 years ago.
34663.5.diff (15.6 KB) - added by melchoyce 4 years ago.
34663.6.diff (16.0 KB) - added by wonderboymusic 4 years ago.
34663.7.diff (15.3 KB) - added by DrewAPicture 4 years ago.
34663.8.diff (15.3 KB) - added by ocean90 4 years ago.
Fixes quotes for term meta docs links
34663.9.diff (18.4 KB) - added by ocean90 4 years ago.
34663.10.diff (4.6 KB) - added by DrewAPicture 4 years ago.
34663.patch (1.4 KB) - added by ocean90 4 years ago.
34663.11.diff (654 bytes) - added by wonderboymusic 4 years ago.
34663.12.diff (1.7 KB) - added by wonderboymusic 4 years ago.
34663.13.diff (2.0 KB) - added by ocean90 4 years ago.
34663.14.diff (15.6 KB) - added by perezlabs 4 years ago.
34663.15.diff (3.8 KB) - added by joemcgill 4 years ago.
Add srcset and sizes to images
34663.16.diff (3.8 KB) - added by joemcgill 4 years ago.
34663.17.diff (1.9 KB) - added by wonderboymusic 4 years ago.
34663.images.patch (6.9 KB) - added by ocean90 4 years ago.
34663.18.diff (3.1 KB) - added by melchoyce 4 years ago.
34663.19.diff (3.6 KB) - added by melchoyce 4 years ago.

Download all attachments as: .zip

Change History (74)

This ticket was mentioned in Slack in #core by wonderboymusic. View the logs.


4 years ago

@DrewAPicture
4 years ago

#2 @DrewAPicture
4 years ago

  • Keywords has-patch added

34663.diff adds the untranslated strings in a patch.

@DrewAPicture
4 years ago

#3 @joemcgill
4 years ago

@DrewAPicture srcset selection based on the "strength of your connection" is not a feature that any browsers have implemented yet, AFAIK. Maybe something like:

Sites now intelligently provide images in multiple resolutions based on screen size and display density. You don’t need to do anything to your content to enable responsive images; the only difference your visitors might notice would be faster page loads and a better experience across devices!

#4 @DrewAPicture
4 years ago

Props thus far: DrewAPicture, markjaquith, helen, nacin, liljimmi, mordauk, melchoyce, ryelle

Last edited 4 years ago by samuelsidler (previous) (diff)

@ryelle
4 years ago

#5 @ryelle
4 years ago

design implemented in 34663.3.diff -- still waiting on some media. The twentysixteen & "responsive images" images need to be optimized & uploaded to w.org; the cloudup gallery for "More third-party embeds" is also a placeholder, to be replaced with another new embed example (I think melchoyce is working on that?).

@DrewAPicture
4 years ago

#6 @helen
4 years ago

  • I don't think we should keep that array of under the hood features to be printed out later, let's just move it back into HTML since it's not being randomized anymore.
  • Force the two separate REST API paragraphs to each be in a column. Having one line of the second one in the first column is awkward.
  • There are at least 2 too many exclamation points. Both sentences in "WordPress embeds" end that way.
  • Title casing is inconsistent. Which way do we go?
  • May be better to specify that that interacting with those new objects is more predictable/intuitive *in code*. For a user skimming the page, if your eye catches on comments/networks being more intuitive, that's a false statement.
  • Responsive images paragraph doesn't feel right to me. Multiple images aren't provided based on screen/device, a different one is chosen from multiple. The semicolon is weird in that it's not clear that the two halves of the sentence relate in terms of differences noticed, perhaps better just as an , and. I also think it's worth noting that you will also reap those benefits as you visit all those other WordPress sites around the web, rather than "so why are you telling me this if I'm not going to notice anything".
  • This was noted to me already, but Cloudup is not camelcased.
  • I know the Cloudup embed is meant to be temporary, but I think generally I would be wary of appearing to promote an Automattic thing more prominently than others. It's certainly not the intent nor is that a blocker, just want to keep that in mind as we choose an actual embed.

@melchoyce
4 years ago

#7 @melchoyce
4 years ago

Adjusted some of the title case inconsistencies and tweaked some of the Twenty Sixteen css in 34663.5.diff.

#8 @wonderboymusic
4 years ago

34663.6.diff fixes the CSS for the Cloudup iframe. Incidentally, Cloudup is slow as dirt. I added caching, but overall, not a great experience (might just be slow wifi). Maybe try VideoPress?

@DrewAPicture
4 years ago

#9 @DrewAPicture
4 years ago

34663.7.diff addresses feedback from @helen in comment:6 and brings in the CSS changes from 34663.6.diff.

@ocean90
4 years ago

Fixes quotes for term meta docs links

@ocean90
4 years ago

#10 @ocean90
4 years ago

34663.9.diff uses the plugin details modal for the REST API plugin link. Just an idea. :-)


I added caching, but overall, not a great experience (might just be slow wifi). Maybe try VideoPress?

Both embeds should be cached, I think we should use the transient API here. For the make/core embed we should also ping systems to add server-side caching.

#11 @DrewAPicture
4 years ago

In 35763:

First pass of the 4.4 about page. Adds strings (not yet translatable) and screen shots (not CDN).

Props wonderboymusic, markjaquith, helen, nacin, liljimmi, mordauk, melchoyce, ryelle, ocean90, DrewAPicture
See #34663.

#12 @DrewAPicture
4 years ago

In 35765:

About page: Fix some minor string errors and simplify URL-building for the plugin install link for capable users.

Props ocean90, DrewAPicture
See #34663.

#13 @DrewAPicture
4 years ago

In 35766:

About page: Add non-breaking spaces to "Reddit Comments" and "Speaker Deck" oEmbed provider names to prevent line wrapping between the words.

Props ocean90.
See #34663.

#14 @DrewAPicture
4 years ago

In 35768:

About page: Final string changes.

Props petya, ocean90, DrewAPicture
See #34663.

#15 @DrewAPicture
4 years ago

In 35769:

About page: Make strings translatable.

See #34663.

#16 @ocean90
4 years ago

The tagline is still the old one:

Thank you for updating! WordPress 4.4 makes it even easier to format your content and customize your site.

#17 @markjaquith
4 years ago

  • Version changed from 4.4 to trunk

Responsive images plus various speed refactoring (comments) could be summarized as "responsive".

REST API and WordPress post embeds could be summarized as "connected".

Thus, my first swing:

Thank you for updating! WordPress 4.4 makes your site more connected and responsive.

#18 @markjaquith
4 years ago

Got good feedback on Slack and in person.

#19 @markjaquith
4 years ago

In 35780:

About Page: Add the WordPress 4.4 tagline.

"Connected" because of REST API and cross-site embeds.
"Responsive" because of responsive images and under-the-hood tweaks.

See #34663.

#20 @markjaquith
4 years ago

In 35798:

About Page: Add the WordPress 4.4 tagline.

"Connected" because of REST API and cross-site embeds.
"Responsive" because of responsive images and under-the-hood tweaks.

See #34663 for the 4.4 branch.

#21 follow-up: @markjaquith
4 years ago

Any outstanding items or issues?

#22 in reply to: ↑ 21 @ocean90
4 years ago

Replying to markjaquith:

Any outstanding items or issues?

[35780]/[35798] for credits.php and freedoms.php. :-)

@ocean90
4 years ago

#23 @ocean90
4 years ago

In 35812:

About: Sync tagline from about page with credits and freedoms.

See #34663.

#24 @ocean90
4 years ago

In 35814:

About: Sync tagline from about page with credits and freedoms.

Merge of [35812] to the 4.4 branch.
See #34663.

#25 @melchoyce
4 years ago

In 35816:

About: Update image of the Twenty Sixteen red color scheme so it matches the updated scheme color.

See #34663.

This ticket was mentioned in Slack in #core by ocean90. View the logs.


4 years ago

@ocean90
4 years ago

#27 @ocean90
4 years ago

In 35823:

About Page: Add Cloudup embed and cache the embeds as site transients.

Props wonderboymusic.
See #34663.

#28 @ocean90
4 years ago

In 35824:

About Page: Add Cloudup embed and cache the embeds as site transients.

Merge of [35823] to the 4.4 branch.

Props wonderboymusic.
See #34663.

@perezlabs
4 years ago

#29 @perezlabs
4 years ago

I added a new patch based on the solution of @melchoyce but from the new repository "develop.svn.wordpress.org" that uses the new directory structure, perhaps it can be useful when making the final commit. Hope that helps!

@joemcgill
4 years ago

Add srcset and sizes to images

#30 @joemcgill
4 years ago

34663.15.diff adds responsive image support to the images on the about page. The URLs used in the src and srcset attributes need to be updated once these are moved over to the CDN, but everything else should remain the same.

#31 follow-up: @nacin
4 years ago

I don't love the idea of every about page hitting two make.wordpress.org URLs, which are full page loads, to then discover the oEmbed endpoint, which we'll then hit, to then load the iframe. The long tail of that is gonna make Barry mad.

I think we should just commit the resulting oEmbed response directly onto the page.

Even better — should we use the wordpress.org/news announcement oEmbed, rather than a make/core explanatory page?

#32 follow-up: @melchoyce
4 years ago

Even better — should we use the wordpress.org/news announcement oEmbed, rather than a make/core explanatory page?

Can we do this? I wasn't sure if it would work, since the post won't be published until after the release goes live.

@joemcgill
4 years ago

#33 @joemcgill
4 years ago

34663.16.diff fixes a small typo in one of the srcset atts in 34553.15.diff.

#34 @wonderboymusic
4 years ago

In 35825:

About Page: use srcset for images, also known as Recursive Dogfooding.

Props joemcgill.
See #34663.

#35 @wonderboymusic
4 years ago

In 35826:

About Page: use the source of the Make/Core Embed response instead of discovering it (or reading from the cache) every time.

See #34663.

#36 @wonderboymusic
4 years ago

In 35827:

About Page: use srcset for images, also known as Recursive Dogfooding.

Merge of [35825] to the 4.4 branch.

Props joemcgill.
See #34663.

#37 @wonderboymusic
4 years ago

In 35828:

About Page: use the source of the Make/Core Embed response instead of discovering it (or reading from the cache) every time.

Merge of [35826] to the 4.4 branch.
See #34663.

#38 in reply to: ↑ 32 @nacin
4 years ago

Replying to melchoyce:

Can we do this? I wasn't sure if it would work, since the post won't be published until after the release goes live.

Yes. We'll know the URL. We can drop it in just before release (since it'll have the jazzer's name).


It looks like these images are fully optimized, yeah? In that case, @dd32 or @pento or me can move them to the .org CDN.

#39 follow-up: @melchoyce
4 years ago

It looks like these images are fully optimized, yeah?

They've been exported for web from Photoshop, but could probably go through another round of optimization through something like ImageOptim or https://tinypng.com/.

#40 in reply to: ↑ 39 @butterflymedia
4 years ago

Replying to melchoyce:

It looks like these images are fully optimized, yeah?

They've been exported for web from Photoshop, but could probably go through another round of optimization through something like ImageOptim or https://tinypng.com/.

I would recommend Kraken - https://kraken.io/web-interface

#41 in reply to: ↑ 31 @ocean90
4 years ago

Replying to nacin:

Even better — should we use the wordpress.org/news announcement oEmbed, rather than a make/core explanatory page?

+1. We should also try to get a featured image in so that both embeds have more or less the same height.

It looks like these images are fully optimized, yeah? In that case, @dd32 or @pento or me can move them to the .org CDN.

Working on this.

#42 @ocean90
4 years ago

In 35832:

About Page: Use w.org CDN for images.

See #34663.

#43 @ocean90
4 years ago

In 35833:

About Page: Remove three superfluous parentheses.

Props jaspermdegroot.
See #34663.

@melchoyce
4 years ago

#44 @melchoyce
4 years ago

Updated the embed sections to be rows rather than a section of columns and had @ryelle vertically center the text in 34663.18.diff.

@melchoyce
4 years ago

#45 @melchoyce
4 years ago

Fixed some lingering responsive issues in 34663.19.diff

#46 @wonderboymusic
4 years ago

In 35834:

About Page: use ReverbNation instead of Cloudup to avoid Ad Blocker cruff with tracking pixels. Adjust the layout accordingly, and improve the layout at smaller breakpoints.

Props melchoyce.
See #34663.

#47 @ocean90
4 years ago

In 35835:

About Page: Use w.org CDN, use ReverbNation instead of Cloudup, adjust the layout.

Merge of [35832], [35833], and [35834] to the 4.4 branch.

See #34663.

#48 @ocean90
4 years ago

In 35839:

About Page: Add release video and update post embed.

Props camikaos, siobhan, rosso99, wonderboymusic.
See #34663.

#49 @ocean90
4 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 35840:

About Page: Add release video and update post embed.

Merge of [35839] to the 4.4 branch.

Props camikaos, siobhan, rosso99, wonderboymusic.
Fixes #34663.

#50 @johnbillion
4 years ago

  • Version changed from trunk to 4.4

This ticket was mentioned in Slack in #core by pento. View the logs.


4 years ago

#52 @pento
4 years ago

In 35862:

About: Add a fallback -webkit-calc() to about.css

We forgot to run grunt precommit before [35834] was committed.

This change doesn't need to be backported to the 4.4 branch, as it only affects Chrome < 26, it's really just to clean up the behaviour of grunt precommit.

See #34663.

#53 @pento
4 years ago

To avoid needing [35862]-style commits in the future, I've added a new "run grunt precommit" step to the release checklist.

Note: See TracTickets for help on using tickets.