[HelpHub] [6.4] Twenty Twenty-Four default theme

[femkreations]

New page for 6.4

• Create a new article for the Twenty Twenty-Four default theme
• Make sure the URL slug under Permalink is: twenty-twenty-four
• Get the details for the theme from this blog post
• Refer to the twenty-twenty-two and twenty-twenty-three pages for inspiration.

General

• Make sure all screenshots are relevant to the latest version
• Make sure videos, if any, are up to date
• Add ALT tags for the images
• Make sure the headings are in sentence case
• Convert all reusable blocks to a ‘regular block’.
• Update the changelog at the end of the article

[github-actions]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[github-actions]

Heads up @femkreations - the "block editor" label was applied to this issue.

[jordesign]

Hey @femkreations - just wanted to note that I started an issue (and a draft) for this already
#1100 (comment)

Do you want me to move those notes and chatter over to this issue? If so - I'm happy to be assigned this one.

[jordesign]

Draft is started here:
https://wordpress.org/documentation/wp-admin/post.php?post=16359058&action=edit

[jordesign]

OK folks - I'm happy with this first draft. There's definitely things that will need to be updated as things are finalised (links to other docs, final design specs etc) but I'd love some feedback.
https://wordpress.org/documentation/wp-admin/post.php?post=16359058&action=edit

[atachibana]

@jordesign It looks good to me. I like the "One theme, many variations" section and its detail information so that that is the essential concept of this theme. Video explanation of how to switch templates is also very helpful. Thank you so much.

One confirmation. Contents of "Design specifications" section seems to be copied from Twenty Twenty-Three. Do all of its individual characteristics apply to this subject as well?
By the way, there is no clear design specification document for this theme, and part of the README.md seems to replace it, such as Colors, Layout, Spacing:
https://github.com/WordPress/twentytwentyfour/blob/trunk/README.md

[jordesign]

One confirmation. Contents of "Design specifications" section seems to be copied from Twenty Twenty-Three. Do all of its individual characteristics apply to this subject as well?

Great question - that was there as a placeholder till I could confirm details...

I've actually gone ahead and changed that section (as it feels a little centered on older classic themes with specific image sizes etc) and shared some more general information.

[jordesign]

I've also gone ahead and added links for 6.4 and the TT4 forums that I expect to exist once things launch (I matched the existing URL structures for previous years). So this should be good for a second review.

[atachibana]

@jordesign
Your updates have made the new section very clear and meaningful information 🎉

[abhansnuk]

Review in progress.

Hello @jordesign thanks for working on this, which is really easy to follow.

I have added a full stop at the end of the paragraph 'In the past, default themes often centered...'

In the following paragraph: "Twenty Twenty-Four ships the ability to switch to different templates for three different types of website - Business (the default), Writer, and Portfolio."

Suggest rewording, based on my understanding of how it will work, to "The Twenty Twenty-Four theme gives the user the ability to switch between different templates designed to fit three design options: Business (the default), Writer, and Portfolio (two alternative options)."

• Is 'Alternative Templates' a heading in the Editor? If not, can we lower case the 't' in 'templates' to use sentence case for docs headings where the words are not official names.

• Suggest rewording of the sentence: "Alternative patterns for the Writer and Portfolio types can be switched to for the following templates:" and to expand on what is meant by this to help the end user. Query - the Writer and Portfolio: if these are being described as templates in the paragraph above, this sentence may be confusing as it refers to 'templates' as the list beneath 'blog home, index, etc. It also introduces 'alternative patterns' for the first time in the post, and the reader may be unsure what this will give them or show. Can it be illustrated?

Update

• In the introduction post on the theme, it refers to the pages as 'use cases' which might help as a descriptor in this doc too.

[abhansnuk]

• "You can use the Replace Template functionality [linked to support doc] to switch to a variant when editing the template."
  Is this support doc available to link to?
• in the video, is there meant to be sound? If not, is it possible to capture more about what it is showing in the text?
• 'switch to a variant' is not easy to follow for people who are unfamiliar with this. If it means, switch to another template, could this be made clearer and reflect the video display, for example, replace a template for these particular pages to another one of the three templates available.
• in the video, after clicking on 'pages' and then 'about', where the cursor goes to seems to be covered up by the horizontal pop-up box. This may be one of the standard release videos available and may not be able to be changed.
• at the end of the video, it shows the save screen, can we add to the end user doc what happens when the page option is ticked. This may cause some uncertainty for users who were getting similar screens for updating reusable blocks and finding difficulties with what this would change.

[abhansnuk]

A general question for the 6.4 videos, do we have any descriptors for the videos built-in under text tracks for accessibility @femkreations and @jordesign ? Thanks in advance.

[abhansnuk]

Under heading 'custom templates':
"Twenty Twenty-Four includes several custom templates for you to use:"
suggest tweaking this to say: "Twenty Twenty-Four includes several custom page templates for you to use:"

• in the three bullet points, 'page title' appears with first letter cap in one and lower case in another. Can these be standardized to lower case.

Under heading 'block patterns':

• "Explore patterns to save time while crafting creative layouts. Patterns are collections of predesigned blocks whose text and media content can be quickly swapped out with your own." Suggest replacing 'swapped out' as this has been found to be difficult to understand by people translating as they read / people unfamiliar with the phrase.
• Image needs an alt text

Under 'Style variations'

• Images need alt texts

Under 'Headings'

• "Headings in Twenty Twenty-Four come with the a variation that includes an Asterix as a bullet point above the heading." - Delete 'the' before 'a'
• "When editing your headings - you will see an option in the sidebar to switch to the variant style." Can an additional sentence or an example of the variant style be given please, that is, what the benefit is/ what this allows the user to do.

Under 'Design specifications' heading

• "While it is worth remembering that the Site Editor’s Styles tools give a wide range of options for customising the style of your site – Twenty Twenty-Four comes with the following defaults." Suggest shortening this to make it easier to follow.
  E.g. "The Site Editor's Style tools provide a wide range of options for customizing the style of your site. Note, that the Twenty
  Twenty-Four theme has the following defaults."
  Also, 'customising' needs to change the US spelling 'customizing'.

• "Should you wish – you can also view a more [complete list of the spacing, color, and layout presets used by the theme." - suggest deleting 'should you wish'.

Under the 'Support and resource' heading

• "Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing Learn WordPress course."
  Change to '...with the Simple Site Design with Full Site Editing course on Learn.WordPress.org'".

Back to the beginning of the post, the first image also needs an alt text.

Excerpt - could you please add a summary of what users / searchers will find in this doc in the excerpt field please.

Thanks so much.

[abhansnuk]

• One additional question. In the opening sentence which mentions accessibility-ready, is it worth linking to this or another more useful page which has a better explanation of what 'accessibility-ready' means as there is some confusion about what it means. https://make.wordpress.org/themes/handbook/review/accessibility/

[jordesign]

Thanks for all the comments and feedback @abhansnuk

I have added a full stop at the end of the paragraph 'In the past, default themes often centered...'

In the following paragraph: "Twenty Twenty-Four ships the ability to switch to different templates for three different types of website - Business (the default), Writer, and Portfolio."

Suggest rewording, based on my understanding of how it will work, to "The Twenty Twenty-Four theme gives the user the ability to switch between different templates designed to fit three design options: Business (the default), Writer, and Portfolio (two alternative options)."

Is 'Alternative Templates' a heading in the Editor? If not, can we lower case the 't' in 'templates' to use sentence case for docs headings where the words are not official names.

Brilliant - thank you. Have changed accordingly.

Suggest rewording of the sentence: "Alternative patterns for the Writer and Portfolio types can be switched to for the following templates:" and to expand on what is meant by this to help the end user. Query - the Writer and Portfolio: if these are being described as templates in the paragraph above, this sentence may be confusing as it refers to 'templates' as the list beneath 'blog home, index, etc. It also introduces 'alternative patterns' for the first time in the post, and the reader may be unsure what this will give them or show. Can it be illustrated?

Great point - technically it is a swapping of the patterns inside the template in order to use the alternative design - so I've reworded to be clearer about that. I've gone for referring them to as alternative patterns that can be used inside the template.

"You can use the Replace Template functionality [linked to support doc] to switch to a variant when editing the template."

Not yet - but it will be in the updated 'Site Editor' support doc. I've changed the placeholder wording to be clear about this.

in the video, is there meant to be sound? If not, is it possible to capture more about what it is showing in the text?

At the moment - that is the video supplied by the Make Design team. I'm not set up to record a better one - but we could definitely revisit this.

'switch to a variant' is not easy to follow for people who are unfamiliar with this. If it means, switch to another template, could this be made clearer and reflect the video display, for example, replace a template for these particular pages to another one of the three templates available.

Great point. I've updated the wording to be consistent in referring to it as using 'alternative patterns'. I've also made the instructions more verbose - but we can adjust this if the main support doc covers this better.

at the end of the video, it shows the save screen, can we add to the end user doc what happens when the page option is ticked. This may cause some uncertainty for users who were getting similar screens for updating reusable blocks and finding difficulties with what this would change.

To my understanding - this is covered in https://wordpress.org/documentation/article/site-editor-pages/#save-status

[jordesign]

"Twenty Twenty-Four includes several custom templates for you to use:"
suggest tweaking this to say: "Twenty Twenty-Four includes several custom page templates for you to use:"

Done - thank you :)

in the three bullet points, 'page title' appears with first letter cap in one and lower case in another. Can these be standardized to lower case.

👍

"Explore patterns to save time while crafting creative layouts. Patterns are collections of predesigned blocks whose text and media content can be quickly swapped out with your own." Suggest replacing 'swapped out' as this has been found to be difficult to understand by people translating as they read / people unfamiliar with the phrase.
Image needs an alt text

Thanks - done :)

Images need alt texts

👍

"Headings in Twenty Twenty-Four come with the a variation that includes an Asterix as a bullet point above the heading." - Delete 'the' before 'a'
"When editing your headings - you will see an option in the sidebar to switch to the variant style." Can an additional sentence or an example of the variant style be given please, that is, what the benefit is/ what this allows the user to do.

All sorted.

"While it is worth remembering that the Site Editor’s Styles tools give a wide range of options for customising the style of your site – Twenty Twenty-Four comes with the following defaults." Suggest shortening this to make it easier to follow.
E.g. "The Site Editor's Style tools provide a wide range of options for customizing the style of your site. Note, that the Twenty

I've simplified this significantly - and moved the reminder about further customisations to the end of this section.

"Learn how to take full advantage of full site editing with the Simple Site Design with Full Site Editing Learn WordPress course."
Change to '...with the Simple Site Design with Full Site Editing course on Learn.WordPress.org'".

Done :)

Back to the beginning of the post, the first image also needs an alt text.

Excerpt - could you please add a summary of what users / searchers will find in this doc in the excerpt field please.

Both done - thank you :)

[jordesign]

One additional question. In the opening sentence which mentions accessibility-ready, is it worth linking to this or another more useful page which has a better explanation of what 'accessibility-ready' means as there is some confusion about what it means. https://make.wordpress.org/themes/handbook/review/accessibility/

This is a great point. To be honest - the 'accessibility-read' part was just copied verbatim from the Twenty Twenty-Three doc...

Something better here might be...

Twenty Twenty-Four is the new, stylish and versatile, default theme for WordPress Version 6.4.

[jordesign]

On advice from the Design/Themes team I've also updated the font details.

[jordesign]

I've gone ahead and added details of the Block variants (as that seemed important).

@abhansnuk @femkreations @atachibana - I'd love to get this pushed through now that 6.4 is out and TwentyTwentyFour has been released.

[abhansnuk]

Agree @jordesign this needs to be out. I have highlighted in the docs channel in Slack too.
Can you add a public preview link to this ticket please too.

I have shortened the excerpt slightly to make sure it fits in the different search views.

Thanks for all your work on this.

Noting for the props sheet, we need to add Jordan Gillman if not already listed. Jordan could you please share your WP.org profile ID. Thanks

[nalininsbs]

It reads well to me. @jordesign if you are happy with the changes now all made in the document itself, can it be published?
Can you please add the publish link to this issue.

If you have not already, please check all images have alt text and there is a short excerpt in for search both on the site and search engines. Thank you for all your work on this.

[jordesign]

Thanks @nalininsbs - Alt tags and Excerpt all checked - I'm happy for it to be published!

https://wordpress.org/documentation/article/twenty-twenty-four/

[abhansnuk]

Added default theme category.