4.8 About Page

[melchoyce]

We'll want to highlight:

• Link boundary feature
• New media widgets
• Updates to the text widget
• Dashboard news upgrade
• Anything else?

I can handle the design.

[matt]

Let's get this done way ahead of time.

[jbpaul17]

@melchoyce for the "under the hood" / "developer happiness" section at the end you can reference the various dev notes being created: https://core.trac.wordpress.org/query?keywords=~needs-dev-note&milestone=4.8

[bridgetwillard]

I'd love to help write the copy but I would need to know what those things do in order to translate it into marketing copy.

:)

[melchoyce]

Thanks for taking a look at this, @bridgetwillard! Here's some more information about the features.

---

TinyMCE Update / Link Boundaries

From the ​Beta 1 post:

An improved visual editor experience, with a new TinyMCE that allows you to navigate more intuitively in and out of inline elements like links. (Try it out to see, it’s hard to describe.)

Have you ever tried updating a link, or your text around a link, and you just can't seem to edit it correctly? Either you're trying to add a work after the link and your new text also ends up linked, or you try to add some more words to your link and you end up outside the link. Overall it's an annoying, confusing experience. This new feature makes the link itself clear. Here's a video: ​https://cldup.com/ZCFn1a43Cp.mp4

Love this tweet about it from @jorbin: ​https://twitter.com/aaronjorbin/status/863189401874157568

Because this feature is so hard to describe, I'm thinking we should add a looping video instead of a screenshot to showcase it.

---

Media Widgets

We have three new widgets: Image, Video, and Audio. They make it easy to add media to your widget areas.

I thought this commit message from @westonruter was rather clever:

Widgets: Introduce media widgets for images, audio, and video with extensible base for additional media widgets in the future.

The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!

​I wrote up a merge proposal for the image widget that can kind of speak for all three.

These are the first of a series of new widgets we have planned for the future.

---

Rich Text Widget

Possibly my favorite of all the updates this release. Some basic formatting has been added to the text widget. Now you don't need to write HTML in order to include:

• Bold
• Italics
• Lists
• Links

I wrote this tweet about it: ​https://twitter.com/melchoyce/status/862754763225673729

If you still want to write HTML by hand, there's a text tab, like the editor.

This is an update to the existing text widget, rather than a new widget.

---

Dashboard News Upgrade

A revamp of the dashboard news widget to bring in nearby and upcoming events including meetups and WordCamps.

Here's what that looks like, for reference:

---

Under the Hood

We're going to need a developer to write this section, so don't worry about it for now.

---

I'm still thinking about the overall hierarchy of the page — debating between grouping the new media widgets into one section and highlighting it at the top, or breaking them out and giving everything on the page the same kind of weight. See some attached ideas for reference.

[jenblogs4u]

This looks like a fun project! I'd love to help with writing the copy. Can we work together on it @bridgetwillard ? :D

[bridgetwillard]

For sure @jenblogs4u There is a link to the GDoc we started with @melchoyce in Marketing Slack. Sara Rosso is going to help, too.

Go Team.

Replying to jenblogs4u:

This looks like a fun project! I'd love to help with writing the copy. Can we work together on it @bridgetwillard ? :D

[jenblogs4u]

Awesome!! Want to meet in the doc at 8:30pm tonight? @bridgetwillard
Replying to bridgetwillard:

For sure @jenblogs4u There is a link to the GDoc we started with @melchoyce in Marketing Slack. Sara Rosso is going to help, too.

Go Team.

Replying to jenblogs4u:

This looks like a fun project! I'd love to help with writing the copy. Can we work together on it @bridgetwillard ? :D

[jenblogs4u]

Awesome!! Want to meet in the doc at 8:30pm tonight? @bridgetwillard
Replying to bridgetwillard:

For sure @jenblogs4u There is a link to the GDoc we started with @melchoyce in Marketing Slack. Sara Rosso is going to help, too.

Go Team.

Replying to jenblogs4u:

This looks like a fun project! I'd love to help with writing the copy. Can we work together on it @bridgetwillard ? :D

[iandunn]

More information about the Events widget is available in the following posts:

• ​Nearby WordPress Events on make/Core.
• ​Showing Upcoming Local Events in wp-admin on make/Community.

Let me know if anyone needs more info about it or anything.

[bridgetwillard]

@melchoyce

Thanks for including the Marketing team on this, firstly. It's an honor to help.

Secondly, as a user (I definitely still consider myself a beginner end user), I am STOKED about these features. (Where have you been my whole life?)

Thirdly, @jenblogs4u and I worked on the copy tonight and here is the GDoc. I went kitschy based upon what I think will resonate with users and our overall audience. A bit of spice is good. And @jenblogs4u heavily edited me.

We like your first wireframe.

​https://docs.google.com/document/d/1G9LyiBFD3YSllc3hYZwuqd8CW0w-j9cdmxM1k_jhzWo/edit?usp=sharing

Here's to 4.8 and the Mystery Jazz Musician!

Cheers.

[ryelle]

40721.diff​ is a first-pass to add the content from the google doc to the about page. I didn't change any of the images or remove the video code, those can be swapped out once we have the new images/videos. I also didn't remove the "Under the hood" section, as that still needs to be written.

[obenland]

In 40791:

About: Let's get a headstart on 4.8 about strings

Strings have been reviewed and are ready for translation—design will come soon.

Props bridgetwillard, jenblogs4u, michelleweber, ryelle, melchoyce.
See #40721.

[obenland]

In 40798:

About: Optimize strings for l10n

Uses html entities for quotes and adds translator comment for event links.

Props ocean90.
See #40721.

[hedgefield]

Good stuff! I added some suggestions to the Gdoc after I saw the current copy in the nightly build.

[ocean90]

In 40814:

About: Remove a stray quotation mark.

Props odysseygate.
See #40721.
Fixes #40837.

[melchoyce]

Thanks @hedgefield! We'll take a look. :)

[melchoyce]

Updated strings from @hedgefield, @bridgetwillard, and @reportermike in 40721.2.diff​.

Question for translators — would it be okay to change the string "Meetup.com/pro/wordpress" to just "Meetup.com" and the string "central.wordcamp.org/schedule" to just "WordCamp Central, or would that make translation harder?

Still need content for the "under the hood" section, which should ideally be whatever biggest changes have been introduced that affect developers, usually 3-8 items. @westonruter @obenland is that something y'all could help me with in the next day or two? I think strings freeze on Friday.

I'll post design progress tomorrow.

[obenland]

Replying to melchoyce:

Question for translators — would it be okay to change the string "Meetup.com/pro/wordpress" to just "Meetup.com" and the string "central.wordcamp.org/schedule" to just "WordCamp Central, or would that make translation harder?

It's currently not translated at all, so we could just swap it

[iandunn]

Replace Events convenience message with discoverability

[iandunn]

Replying to melchoyce:

would it be okay to change the string "Meetup.com/pro/wordpress" to just "Meetup.com" and the string "central.wordcamp.org/schedule" to just "WordCamp Central, or would that make translation harder?

I think it'd be better to replace that string with something else, because it's not communicating the actual intent and primary benefit of the update.

Our goal in bringing events to Core wasn't to make discovering individual events slightly more convenient for the 1% of WP users who already know about their local group. The goal was to make the community as a whole discoverable to the 99% of users who don't even know that it exists.

People who already know about the community can just join a group and get email notifications whenever a new event is published, so the convenience thing wasn't a problem we were trying to solve (although it's a nice side-effect).

40721.3.diff​ is an iteration on 40721.2.diff​, which suggests the following changes:

A revamp of the dashboard news widget brings in nearby WordPress events, including meetups and WordCamps. Discover all that our thriving offline community has to offer!

[...]

Did you know that WordPress has a thriving offline community, with groups meeting regularly in more than 400 cities around the world?

Being part of the community can help you improve your WordPress skills, and network with people you wouldn't otherwise meet. And now you can easily find your local events just by logging in your dashboard.

I'm sure the phrasing/tone/etc needs some changes (or at least refinement), but I think that general message is closer to what we should be communicating.

I think "meetup" should always be lowercase, because we use it in generic sense; it's not referring to Meetup.com specifically. There are a few official groups that use other platforms, and we might migrate from Meetup.com to another platform in the future.

[bridgetwillard]

Meetup is a brand and should always be capitalized much in the same way WordPress is always "WordPress," rather than "wordpress."

Of course, we can revise the text given this insight, but let's work on that copy in the Google Doc since it's been through several rounds of edits.

Also, I'm totally open to those being just links because not many people who subscribe to Meetup get the emails (they often go in spam) and you'd be surprised at how many people I talk to (involved in the community) who didn't know a Meetup existed, had an event, or that a camp was happening.

[westonruter]

Under the hood changes that jump out at me, though probably the majority of these would not be noteworthy enough for the About page:

• #35760 Provide API for TinyMCE editor to be dynamically instantiated via JS
• #40450 Introduce REST API endpoint for proxying requests to external oEmbed providers
• ​Multisite improvements
• #39591 Introduce wp_doing_cron()
• #32296 Customize: Increase width of controls pane to give more room on high resolution displays
• #40301 New filter to disable auto-focus on the login screen
• #31218 nav-menu.js menu item added event
• #36163 Make Walker_Nav_Menu::start_lvl more flexible by introducing filters for class name(s) at least
• #38673 Introduce helper function for DISALLOW_FILE_MODS checks
• #39087 Customizer: Add indicator when additional widget areas are hidden
• #38367 Adding Screencast.com as an oEmbed provider

[iandunn]

Replying to bridgetwillard:

Meetup is a brand and should always be capitalized much in the same way WordPress is always "WordPress," rather than "wordpress."

"Meetup" is a brand, but ​it's also a generic term. When we use it, I think we're always referring to the generic term.

The Tokyo WordPress meetup is still a "meetup", even though it uses DoorKeeper.jp instead of Meetup.com. We wouldn't call it the "Tokyo WordPress DoorKeeper", or say, "...upcoming events including Meetups and DoorKeepers and WordCamps."

let's work on that copy in the Google Doc since it's been through several rounds of edits.

My bad, I'll add some comments there.

[melchoyce]

Replying to obenland:

Replying to melchoyce:

Question for translators — would it be okay to change the string "Meetup.com/pro/wordpress" to just "Meetup.com" and the string "central.wordcamp.org/schedule" to just "WordCamp Central, or would that make translation harder?

It's currently not translated at all, so we could just swap it

I was thinking more along the lines of, would they need to try to translate "WordCamp Central" and would that be weird to try to translate?

[apmarshall]

Replying to westonruter:

Under the hood changes that jump out at me, though probably the majority of these would not be noteworthy enough for the About page:

Seems like from the wireframes @melchoyce provided we are looking for 1-2 sentence summaries of about 6 of these to include on the about page. Is that right?

I see some blog posts written about a few of these items, would be happy to take a stab at writing some 1-2 sentence summaries of those to include in the about page if that would be helpful.

[melchoyce]

Replying to apmarshall:

Seems like from the wireframes @melchoyce provided we are looking for 1-2 sentence summaries of about 6 of these to include on the about page. Is that right?

Yup! Just a short summary of the top developer features/changes in the release, along with any relevant links. We usually do between 2-9, depending on the release.

[apmarshall]

Replying to melchoyce:

Yup! Just a short summary of the top developer features/changes in the release, along with any relevant links. We usually do between 2-9, depending on the release.

Great, sending you something shortly.

[melchoyce]

Strings updated in 40721.4.diff​, with new contributions from @apmarshall and @azaozz, plus more contributions from @iandunn, @bridgetwillard, and myself.

[bridgetwillard]

Thank you so very much. :)

Replying to melchoyce:

Strings updated in 40721.4.diff​, with new contributions from @apmarshall and @azaozz, plus more contributions from @iandunn, @bridgetwillard, and myself.

[melchoyce]

Mockup posted: About Page mockup.png.

I'll be working with @ryelle tomorrow to make a design patch.

[obenland]

In 40838:

About: Further polish for feature descriptions.

Also adds Under The Hood content.

Props apmarshall, azaozz, iandunn, bridgetwillard, melchoyce.
See #40721.

[melchoyce]

Future note: Let's get props for @hedgefield and @reportermike in the next commit.

[melchoyce]

Updated Under the Hood strings from @apmarshall and @obenland in 40721.5.diff​. Also need back-props for @hedgefield and @reportermike.

[azaozz]

In 40841:

About: Further polish for Under The Hood.

Props: melchoyce apmarshall obenland. General props for the About page: hedgefield reportermike.
See #40721.

[ryelle]

40721.6.diff​ adds in the new images (the video still needs replacing), and is using picture to display a different widget layout for different screen sizes. These still need resizing & srcset support.

@melchoyce also suggested switching to flexbox for the layout, so I've tried that, but I'm not 100% sure what prefixes are needed for browser support, so I'd appreciate someone better at flexbox and/or using IE to check it out :)

[westonruter]

Add link to Media Widgets API heading for new dev note

[melchoyce]

@rclations just tested the patch at WordCamp Maine and discovered a flexbox bug in IE11, where the container is super wide. He mentioned that adding a div with max-width: 100% inside of the .col container, it should fix it (or something similar).

[rclations]

This is the specific issue I found testing on IE11 -
​https://connect.microsoft.com/IE/feedbackdetail/view/951267/horizontal-scrolling-with-flex-grow-max-width

The max-width: 700px; on .about-wrap .one-col:not(.headline-feature) .col is the direct culprit, but I'm not sure how we want to tackle the issue.

This only affects the section shown below in the screenshot.

[melchoyce]

In 40849:

About: Introduce design and add link to Media Widgets API dev note.

Props: ryelle rclations melchoyce westonruter.
See #40721.

[francina]

Hi!
I added a couple of comments in the GDoc about writing copy that can resonate with different cultures.
Localisation is a subtle art and while we can always chose to remove a sentence completely or rewrite it, I feel that it would be great to have a text that works out of the box for a global community.
Thank you!

[johnbillion]

I have some concerns about the overall tone used on the About page for 4.8.

I'm aware that this feedback is late in the cycle, and that the text has gone through several revisions by the marketing team, but that doesn't negate the fact I think some of this text does not befit WordPress.

I find its tone to be childish and full of meaningless fluff. It's actually borderline condescending. WordPress is used by millions of people in hundreds of languages around the world, yet meaningless filler such as "This feature deserves a ticker-tape parade down Main Street" are being introduced onto the About page.

WordPress has lots of language in it that reflects well the personality and history of the project ("Howdy!"). If that's the approach to take with the About page, then that's great, but the current tone of the About page doesn't reflect this. It does nothing to help convey its intended message.

I hope the marketing team realise that this is not a complaint, this is constructive feedback. We ought to do better than this.

These phrases should be re-thought or removed completely:

Though some updates are tiny (TinyMCE, that is — see what we did there?)

The opening paragraph on the page expects an end user to know what "TinyMCE" is.

Get ready for new features you’ll welcome like an old friend

How about "Get ready for new features we hope you’ll find useful".

Adding an image to a widget is now a simple task that is achievable for any WordPress user without hiring a developer. (Don’t tell them we told you that.)

This sentence is jarring because it uses the third person, unlike the rest of the page. The reference to not hiring a developer is unnecessary and doesn't help to convey the functionality that's being introduced.

A welcome video is a great way to humanize the branding of your website. It creates trust and empathy in your visitors. You can now add any video from your Media Library to a sidebar on your site with the new Video Widget. So, you, too, can be liked and trusted instantly.

On the other end of the scale, this paragraph sticks out like a sore thumb that was copied and pasted from "Marketing Fluff 101". Three out of the four sentences in this paragraph are literally meaningless.

How about: "You can now add any video from your Media Library to a sidebar on your site with the new Video Widget. You can use this to show a welcome video to help introduce visitors to your site, or promote your latest content."

This feature deserves a ticker-tape parade down Main Street.

Let's not forget that we're talking about an update to a sidebar widget in a piece of publishing software. This sentence should be removed.

[Presskopp]

While we are here I want to point out that the

"some updates are tiny" gag only will work well in english (and only if you know what TinyMCE is about). We try to reflect the tone of the original in (german) translation, and it is not an easy task to grab the 'feeling' the wording should transport, keep the jokes in and be informative all in once. It's helping a lot, from the perspective of a translator, if we keep it simple and clear, like indicated in the post above.

[melchoyce]

There's been some more conversations and updates in the doc. I'm going to hold off until tomorrow to make any more updates, to give some time for any last-minute feedback.

It's a little too late to make any sweeping changes to the tone of the page, and I think it's okay for us to experiment with new styles of writing. We've never had marketing folks involved before, and I think it's natural for there to be some disagreement as we experiment. We can take larger feedback around tone and presentation and apply it to future releases. For now, let's focus on final pieces that feel problematic and try to smooth them over so translation can start.

[francina]

Replying to melchoyce:

There's been some more conversations and updates in the doc. I'm going to hold off until tomorrow to make any more updates, to give some time for any last-minute feedback.

Thank you! I am adding a couple of notes for your consideration.

[francina]

I re-read the text and here are some notes for your consideration.

Though some updates seem minor, they’ve been developed by hundreds of Core Contributors and Committers with you in mind. Get ready for new features you’ll welcome like an old friend.

We should refrain from assuming what is minor or major. Core Contributors are not the only ones who develop, propose features, submit patches, report bugs and all the other things that go into a release.

The first sentence and the opening of the second one could be combined. Do you think "Get ready for some exciting new features, developed by hundreds of contributors with you in mind" could work?

achievable for any WordPress user without hiring a developer. (Don’t tell them we told you that.)

This sounds diminishing for developers and for users. Also I seem to remember we try to avoid the term users in favor of people or people that use WordPress.

This feature deserves a parade down the center of town.

This could be removed altogether: the following sentence explains what the widget does and it's enough.

a more intimate welcome message

Intimate? Sorry, no.

but try to use them for good!

?

(because you’re running updates and writing posts, right?)

Hmm, not necessarly: it depends on your role in the website, each one has different capabilities.

New CSS rules mean extraneous content (like “Add New” links) no longer need

English is not my native language, so I might be wrong, but I think "need" should be "needs"

And finally, to quote @iandunn comment in the GDoc:

I personally hate it when advertisements try to tell me what I need, because it feels condescending.

I am not a podcaster, I am not a musician and yet I might find the audio widget useful. I don't want to add video to grow my personal brand or create trust: maybe I just want to add a video of my cat playing. Why would I want to add a headshot and brief bio? Why not a manifesto? Or a picture of my latest knitting project?

The 28% of the web is made by loads of different people that use this great piece of software for different purposes: we should refrain from suggesting specific uses for features that are quite self-explanatory.

[netweb]

Replying to melchoyce:

I think strings freeze on Friday.

FYI: Hard string freeze is tomorrow, 1st June 2017 per ​https://make.wordpress.org/core/4-8/

[melchoyce]

In 40861:

About: Add Link Boundary video and update poster image.

See #40721.

[melchoyce]

40721.9.diff​ takes some recent feedback to mind. This should ideally be the last content patch, unless someone catches a typo.

Contributions in this patch from @bridgetwillard, @jenblogs4u, @michelleweber, @flixos90, @johnbillion, @francina, and myself.

[voldemortensen]

Small inconsistency I see:

A welcome video is a great way to humanize the branding of your website. You can now add any video from the Media Library to a sidebar on your site with the new Video Widget.

Are you a podcaster, musician, or avid blogger? Adding a widget with your audio file has never been easier. Upload your audio file to the media library, go to the widget settings, select your file, and you’re ready for listeners.

In first, it says the "Media Library", but in the second, the "media library". Following convention in other sections I think the second should be capitalized.

Or you edit the text in the link, but it ends up outside of it.

This sentence seems a bit weird to me. The text references two "it"s. Its hard to tell which it is it.

Now you can easily find your local events just by logging in to your dashboard and looking at the new Events and News widget.

In other places that specific, singular widgets are mentioned, "widget" has been capitalized.

That's all that I see so far. Great work! I know About pages are hard :)

[melchoyce]

Thanks @voldemortensen! Made some updates.

[pento]

I really like the tone for this About page, it's an interesting evolution of the tone used in previous releases. "Fluffy" language is not something to be avoided, it helps bring personality to what can otherwise be a fairly dry read.

I'm also inclined to trust marketing folks to be better at writing marketing copy than I am, so absent a reason otherwise, I would absolutely go with their recommendation. :-)

Anyway, go ahead and commit 40721.10.diff​, @melchoyce. Looks good to me.

[melchoyce]

In 40863:

About: Finalize strings.

Props: bridgetwillard, jenblogs4u, michelleweber, flixos90, johnbillion, francina, voldemortensen, melchoyce.
See #40721.

[ocean90]

In 40865:

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

See #40721.

[joemcgill]

40721.11.diff​ includes responsive assets for the two images, already uploaded to the wp.org CDN, and updates the references for the link-boundary assets to also point to the CDN.

[joemcgill]

@melchoyce noticed that there was an unnecessary CSS border around the events widget image, since the image itself includes a border. I've uploaded a new patch 40721.12.diff​, which removes the CSS border for images on the about page.

[pento]

40721.13.diff​ fixes a couple of minor code formatting whitespace issues, no other changes from 40721.12.diff​.

It's ready for commit.

[melchoyce]

In 40881:

About: Swap out images and videos for CDN versions, and add responsive images.

Props: joemcgill, pento.
See #40721.

[jorbin]

In 40885:

About Page: update CSS with prefixes

Seconded by melchoyce.

See #40721.

[jorbin]

In 40886:

About Page: update CSS with prefixes

Backports [40885] from trunk to 4.8.

Seconded by melchoyce.

See #40721.

[jorbin]

In 40887:

About: Swap out images and videos for CDN versions, and add responsive images.

Backports [40881] from trunk to 4.8.

Props: melchoyce, joemcgill, pento.

See #40721.