Beatriz Fialho 3:12 pm on January 16, 2023  

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

Joen A. 9:32 am on January 16, 2023
Tags: ,   

Design Share: Jan 2-Jan 13

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

Learn redesign

We continued working on the Learn redesign. Figma file.

Themes Directory redesign

Designs for a Themes Directory redesign.

Button Padding

Before/After

From the department of details that matter, a bug concerning button padding was fixed. Completed in PR 46764.

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

Joen A. 9:58 am on January 2, 2023
Tags: ,   

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

Joen A. 8:23 am on December 19, 2022
Tags: ,   

Design Share: Dec 5–Dec 16

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

Top Toolbar improvements

When “Top toolbar” is enabled, or when 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 is used in constrained contexts, the toolbar is moved from the block context to the top of the viewport. The current behavior is not as elegant as it could be, and in this issue we are exploring enhancements.

Hosting redesign

We worked on the initial iteration of the redesign of the Hosting page. Figma file.

Jobs redesign

We continued iterating the Jobs site adding secondary pages and updating several components. Figma file.

Learn redesign

We worked on the initial iteration of the redesign of the Learn pages. Figma file.

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

Julia Golomb 3:41 pm on December 8, 2022
Tags: ,   

X-post: Suggest Topics for the 2023 WordPress Community Summit

X-comment from +make.wordpress.org/community: Comment on Suggest Topics for the 2023 WordPress Community Summit

Joen A. 9:56 am on December 5, 2022
Tags:   

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

Before/After

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

Estela Rueda 6:04 pm on November 22, 2022
Tags: ,   

X-post: DevHub getting a new look

X-comment from +make.wordpress.org/docs: Comment on DevHub getting a new look

Joen A. 10:45 am on November 21, 2022
Tags: ,   

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

Joen A. 2:56 pm on November 11, 2022
Tags:   

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

Joen A. 8:54 am on November 7, 2022  

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