A refresh of WordPress.org/themes

As part of a broader project to reimagine the visual appearance, functionality, and other elements of the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ website, one of the next focus areas is the WordPress Theme Directory. It will soon receive a refresh similar to other pages of the WordPress.org website, such as Showcase or News.

The images above provide a general overview of the site’s main landing page, theme details page, and the theme preview flow.

The refresh brings the Theme Directory in alignment with the vision for WordPress.org, updates the theme taxonomies, and includes improved usability. Additional updates and enhancements are planned in the future, and this iteration of the site focuses primarily on design work while leveraging existing functionality.

Contributors are welcome to provide feedback on this project within the Figma file or the GitHub repository.

#redesign

A refresh of WordPress.org/Showcase

In the near future, the Showcase section will receive a refresh in the visual style started with /News:

The gallery above shows the three basic layouts: landing page, single page, and archive. 

The refresh of the Showcase site addresses several requests that have been made in previous discussions (Call for design: WordPress Showcase, Showcase redesign, and this Showcase GitHub issue), such as adding supplementary metadata to each showcased site, improving the mobile page layout and, in general, making the design of the whole section more modern and exciting. The current work represents a starting point that will continue to be iterated upon as additional features, and content changes are explored.

Feel free to provide feedback here, in the Figma file, or follow the Showcase GitHub repository for future developments and conversations.

#redesign

Design Share: Dec 19–Dec 30

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Translate Redesign

We explored a redesign of the Translate pages with several things still being worked on.

Top toolbar improvements

For constrained contexts or simply if you prefer, there’s an option to dock the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. toolbar to the top of the screen. At the moment this results in a stacked and somewhat clumsy experience, which these explorations aim to mitigate through making the singular top toolbar contextual. Needs dev in 40450.

An in-canvas drag handle exploration

An ongoing problem with the top toolbar option is that there’s no handle for drag and drop. To go along with top toolbar improvements, this is an exploration to move the handle back in context of the block, same color as the text, so it works for either toolbar configuration.

Move outline stats to the top of the outline

The document outline was recently merged into the list view. Responding to feedback that it was easy to miss at the bottom, we moved those stats to the top of the outline tab. Completed in 46648.

A unified UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. components grid

Block editor UI components are currently a mix of sizes ranging from 32 over 36 to 40px in height. This new issue outlines an approach to unifying on 32 and 40px sizes, with 40px being the tall and graceful default, and the more compact size being appropriate for a few specific contexts, such as the top toolbar. Issue 46734.

Adding Fonts

Mockups to go with PR 46332, which explores font management.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Nov 21–Dec 2

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Developer and Documentation redesigns

We continued iterating the design of the Developer and Documentation pages with feedback from the community and the WordPress Documentation team.

Jobs redesign

We started redesigning the WordPress Jobs website. Figma file with an initial iteration.

Global styles summary view for blocks and styles

We are working on a feature called Style Book, a collection of every blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. available organized by categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. that can be used to customize and preview the style of a site. Figma file and issue.

Summary panel grid tweaks

A very tiny improvement to the spacing of items in the post status summary panel. More work to be done. PR.

Snap point updates

Updated mockups for rendering snap-points when resizing images. There is an interesting CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. challenge for rendering the overlay with transparent gutters in both centered, and justified right configurations.

Global Styles panel/drilldown synchronicity

Efforts to add box-shadow controls to the editor have unearthed an inconsistency between Global Styles properties and inspector panels. For example, a missing “Border” panel, resulting in border properties currently being found in the “Layout” section. This PR adds a new border panel, with some icon work attached.

Menu Item Transforms

Building navigation is made slower by having to pick between mostly similar item types, “Page Link” vs. “Custom Link”. This issue details a simplification to hopefully reduce to a single item that can be transformed in the inspector.

FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. counter in Openverse

The filters applied counter is coming back to the Filter button and the filter tab. The idea is for improving the content settings flow and how users are aware of the narrowed results.

Browse Mode

Pull Request #44770 reorganizes the site editor so that it is better positioned for exciting future enhancements like browse mode.

Shadows

Pull Request #46228 explores higher definition shadows in the block editor UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing..


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Nov 7 – Nov 18

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Style variations for blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. types

Block style variations are preset block designs. These mockups explore a way to edit them in one place, as well as create new ones. Issue.

Drop shadow tools

Editing and applying drop shadows to blocks, locally and globally, should be possible. These mockups explore how. Issue.

Developers redesign

Work was started on a redesign of the developer section of the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ support pages. Figma file

Enterprise redesign

A mockup for a redesign of the Enterprise page of wordpress.org to follow the new style from News. Figma file.

Updating the Padding control

A follow-up design evolution of the preset padding control in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

Design Share: Oct 10-Oct 21

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Brushes Collection

Marko is looking at expanding brushes collection while improving their style.

Browse mode

Jay is working on the finer details of Browse mode, which will elevate the content editing experience in the Site Editor. Check out the PR here.

Top Toolbar

Jay is exploring how we might update the Top Toolbar option in the Editor so that it occupies less space, with one eye on smaller applications of the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor.

Font pairs & management

Joen is exploring font management features. 


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design, #design-share

TT3 default theme: Announcing style variation selections

Hey everyone! I’ve been completely blown away by the creativity on display in the style variation submissions received for the Twenty Twenty-Three theme.

Since the window to submit new style variations for the TT3 theme closed last week, I’ve been discussing next steps with design lead, @beafialho. Out of the 38 submissions received from 19 contributors spanning 8 different countries (!), we’ve curated a list of 10 style variations to be shipped with the TT3 default theme.

Before jumping into the list of selections, I wanted to share our selection criteria and plans for next steps:

  • These variations were selected in an effort to feature the most drastically different set of variations possible — so in many ways, we were looking at what would work best as a collection versus selecting our favorite standalone submissions.
  • Let’s continue to iterate on the selected submissions up until the WordPress 6.1 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. period begins on September 20th.
  • @beafialho and I have made some tweaks to the curated set of variations and have left comments on the individual GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ issues for each variation with the requested changes. In many cases, the changes were inspired by a similar submission (we’ll tag any folks whose submissions inspired feedback for others).
  • No explicit next steps are needed from style variation authors — you can update theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. files where relevant OR those changes can be made in development by @mikachan and others.
  • Some of the changes suggested may be a bit aspirational, but let’s continue pushing to see how opinionated we can make each of these variations.
  • There are also some great discussions happening already about how to showcase the remaining submissions. Some ideas were already discussed in issue #73 — let’s continue thinking about where to collect all the amazing work submitted.

Selected variations

Pitch

by @richtabor

Pitch will make a great “dark” version of the base theme.

Github pull request

Example 2 (name TBD)

by @beafialho

This variation is an interesting experiment in using a single type size. We tweaked it to use a smaller universal type size, a narrow column width, and took some inspiration from the border radius effect used on images in @melchoyce‘s Mono submission.

GitHub issue

Example 3 (name TBD)

by @beafialho

This variation uses a bold color for all the typography across the site and we think the gray background would work well in a lot of different contexts. 

Pilgrimage

by @luminuu

This vibrant submission seems like a really nice, opinionated option for a dark version of the base theme. We’ve made some suggestions on how to bring more color to this variation beyond the proposed overlay effect. We’ve also tried a dot pattern texture in the background that would be a cool, unique addition here!

GitHub issue

Marigold

by @nudge

This variation is a great more traditional option. It would be great to take some inspiration from the Soft variation submitted by @melchoyce and use the Source Serif typeface throughout.

GitHub issue

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. out

by @critterverse

This variation uses opinionated typography and a duotone effect that “blocks out” your images and featured images by using similar colors for the shadow and highlight. We’ve updated these colors with more contrast so that the images are slightly more visible.

GitHub issue

Pumpkin Spice (name TBD)

by @colorful-tones

This style variation has some really custom elements, like the border around the edge of the page, cool button styles, and unique link underlines. The background color felt similar to a few other submissions and the orange accent color doesn’t have a lot of contrast, so we’ve suggested a new color palette for this variation that would help us round out the collection a bit better.

GitHub issue

Sherbet

by @bgardner

We loved how fun and colorful this submission was. It had a lot of overlap with another gorgeous submission, @scruffian‘s Retroactive variation — it would be great to incorporate some of the super unique aspects from that submission into Sherbet to make it even more opinionated.

GitHub issue

Aubergine

by @anariel-design

Shout out to @anariel-design, who was our most prolific submitter and created so many lovely variations that it was hard to pick just one! We loved the unique split color background effect used in Aubergine and suggested some ideas to customize it even further.

GitHub issue

Grapes

by @amjadr360

We loved the color palette on this submission and thought the type pairing worked really well!

GitHub issue


Huge thanks to everyone who has contributed to this experimental process so far by creating style variations, helping iterate on the base theme templates, or landing new GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ pull requests from our project wishlist. We’re excited to keep iterating together over the next couple of weeks!

Twenty Twenty-Three default theme — Project kickoff

GIF that rotates through 5 different variations (on both a mobile and desktop size) showing how the styles might appear across sites with different types of imagery.

Hey, everyone! After sharing a proposal for a new approach to this year’s default theme that would emphasize a diverse collection of style variations, there were a lot of positive replies and notes from folks who’d like to be involved in the process. With the help of @mikachan, we now have a repository for a stripped-back and minimal version of Twenty Twenty-Two, which can serve as our base theme. I wanted to use this post to outline some of the process and timeline details around the collaborative format we’ll use to create style variations for the TT3 theme.

First, a look at the base theme

Figma link: https://www.figma.com/community/file/1139275543113752375

Template layouts for the Twenty Twenty-Three base theme: Homepage, Single page, Archive page, Single post, 404 page, and Blog alt.
Styles for the Twenty Twenty-Three. base theme, including typography sizes for desktop and mobile, colors, and button states.

@beafialho made a few changes to TT2 in order to strip it down to a bare, unopinionated canvas:

  • The largest heading sizes have been scaled down
  • Different color styles have been applied
  • The serif font for headings has been replaced by system sans serif font
  • Images have been removed
  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ fluid typography and spacing presets functionality have been added

Bea also made four style variations to demonstrate how dramatically different the look & feel of each of the variations can be:

One important note is that we are limited in the number of fonts we can include with the theme and should aim to use 3–4 different typefaces across all variations (in addition to systems fonts). Bea has selected a couple of fonts, used in the variations above, that seem like a good starting point to use because of their simplicity and variety:

  • System sans serif font
  • IBM Plex Mono
  • DM Sans
  • Source Serif Pro

This is just a starting point, rather than the final list of fonts that will be included with the theme. If anyone feels strongly about using a different font, please speak up because this list can certainly evolve based on what folks would like to use! We can also suggest changes to the base theme as needs arise.

How to create and submit a style variation

Get Twenty Twenty-Three

View the repository for TT3 and follow the instructions to get started: https://github.com/WordPress/twentytwentythree

You’ll need to set up a local WordPress instance and clone/download the repository into your /wp-content/themes/ directory.

Join the SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel

We can collaborate throughout this process in a dedicated channel on the Making WorkPress Slack: #core-themes-projects. If you replied on the original post or reached out in DMs, you’ve already been added to the channel. This can be a place for folks to ask questions and share work in progress through screenshots or videos. The more we work together, the more we can ensure all the variations feel as different, opinionated, and unique as possible!

Design a style variation

This can be done a few different ways, including:

  • Create an alternate theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. file to the one provided by the theme and change values directly in the code.
  • Make changes in the Global Styles panel in the Site Editor. You can save these changes as a new style variation using the Create Block Theme plugin.
  • Design static mockups in Figma or a similar program.

Submit your style variation

When you’re ready to submit, please create a new issue on the TT3 repository and share your designs:

  • Theme.json files can be submitted as code or as zip files. 
  • Add images that showcase the look & feel of the variation.
  • Include a style guide with design specifications — this should include details on typography, colors, spacing, etc. Here’s an example.

Project timeline

Aug 10: Project kickoff

Aug 31: Style variation submissions close

Sept 7: Final curated set of style variations announced

Sept 20: Theme and all variations are committed to Gutenberg trunk in time for WordPress 6.1 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1

Gutenberg considerations

There are a few open issues and PRs that would benefit this project and may be able to be moved forward in the next few weeks, including:

We appreciate any efforts by Gutenberg contributors to help move these issues forward! Let’s plan to keep in touch in the channel about any significant changes in functionality that happen after the project kickoff.

Props

Huge thanks to everyone who’s contributed and shared ideas for this project so far!

Design lead: @beafialho
Development lead: @mikachan

+make.wordpress.org/themes/

Design Share: Aug 28-Sep 9

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Curating TT3 style variations

We’ve been busy curating and remixing a set of 10 community-submitted style submissions to be bundled with the upcoming Twenty Twenty-Three theme, which were announced on the Make Design blog this week. In total, we received 38 submissions from 19 contributors in 8 different countries!

Improvements to the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ Homepage

An idea for rotating between different versions of the large headline at the top of the homepage with each page load went live on the wordpress.org site. 

Text and blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. selection improvements in Safari

A selection across HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. markup, in Safari, is interpreted as a selection across every node and element in the DOM, and paints a selection marker to that effect. But this is not accurate to what you should see in an editor, where only a subset gets copied or interacted with. By carefully employing user-select, we improved the accuracy of what actually gets selected. These improvements are in v14.1, with more to come. Read more in the PR.

Navigation block overlay improvements

The navigation overlay now uses root paddings if they are defined, making it possible for themes to ensure the menu icon sits exactly where the overlay close button will be. A subtle fade/move animation was also added to the overlay that opens. Completed in PR 1, PR 2.

Navigation block display UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. improvements

As part of the efforts to improve the navigation block, we have proposed an enhancement to make the Overlay Menu interface much easier to use and we are also working on adding more customization options (issue).

HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. hand-off

Since Openverse team will start to implement the new header next week, we have been polishing the component for all breakpoints and other use cases. The hand-off steps required creating several Figma components for the Design Library migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies..

Quality of Life improvements in the Design Library

We continue improving the WordPress Design Library and this week we moved the deprecated components and views to an independent file. We also added a small visual guide to better explain the role of each page. These small improvements try to make the library more accessible for new and existing users.


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design#design-share

Design Share: Oct 24-Nov 4

Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.

Custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.

Exploring the Add the ability to add custom CSS through Global Styles, or in Group blocks.

Sticky groups

Explorations on the ability to make a group block sticky.

Move document information and outline to list view panel

Added an illustration for the empty state of the outline list that is now inside the list view panel. PR

Push local blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. styles

Exploring ideas for a functionality that would allow users to extend the local styles of a block to all the other blocks of the same type. Design file and issue on GitHub.

Import, export, copy styles without switching themes

Exploring the ability to import, export, or switch to styles from a theme that’s installed but isn’t your currently active theme.

Copy and Paste Block Styles

Exploring a feature for copying and pasting styles between blocks. Design file and issue on GitHub.

Colorisation of synced blocks

A long-time requested feature! PR 45473 is putting the finishing touches on designs to highlight globally synced blocks like Template Parts and Reusable Blocks in the UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing..


If you have updates you’d like to include in the next Design Share, please drop a note in the Design channel on the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

#design#design-share