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

#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

Design Share: Sep 26–Oct 7

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

Selection style refresh

The visual appearance of selecting text and blocks has been updated to be clearer. Partial selections remain the native indicator, but when the selection starts to include a 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. that can’t be merged, the multi-selection now shows an overlay color across every block selected.

Navigation overlay as a block

Revisited and updated an issue for moving the navigation overlay into a separate block, allowing global styles customization and custom inner blocks. The issue could use your feedback!

Resizing images to snap to wide and full alignments

If you resize an image to be larger than the main content column, you’ll and up with a badly aligned image that stops being responsive. So perhaps we could snap you to wide and full alignments, when you near those? Mockups here.

Removing layout shifts from Quote and Image

Most on-select layout shifts have been removed from the editor, but the image caption and quote citation fields still cause a jump. This mockup explores moving those fields into a toolbar button.

Cover margin bugfix

From the department of details that matter, the focus style for a Cover block was a couple of pixels too tall, surfacing a gap at the bottom. We fixed it


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: Sep 12 – Sep 23

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

Integrating Document Outline into list view

A couple of explorations on how the List View might look if we integrated the Document Outline into it. This would simplify the top toolbar. GH Issue.

Continuing on Placeholders

Continuing with making placeholders that work well in patterns, one PR expands the minimalist style to the Video 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., and another refreshes the appearance from that of a dashed border to a simpler style. In progress here and here.

Updating link/unlink buttons

The link/unlink buttons have been updated to be regular icon buttons. Completed here.

Split inserter

The inserter for patterns is being split into a column of categories and a column of previews. In progress PR, and original design.

More Safari text selection fixes

Previously thought to have been fixed, the selection issue now has a new patch applied, that should be more resilient. Completed with more to come.

Media Library Inserter

New work started to on a new Media tab in the Inserter, which will help users adding images to the content without having to open the Media Library. It could also offer an option to search Openverse.

Image dropping modal

Idea: a small modal that appears when users drop a file outside of a drop area, offering them three options: save the file to the Media Library, append it to the post, set it as Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.. Original issue.

Refreshing patterns for the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block

A proposed refresh of the patterns that come bundled with the Query Loop block.

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/ Design Library update

Updates to the WordPress.org Design Library with components for the recently redesigned Global navigation and also improved the footer components with some variations.

WordPress.org/mobile

There’s a new design for the wordpress.org/mobile page.

Progress on Twenty Twenty-Three theme

Selected style variations have been added to the TT3 theme with edits that were suggested during the curation round. So now would be a great time to test, test, test all variations!


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, #design-share

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, #design-share

Design Share: Aug 15-26

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

New Homepage and Download pages for 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/

New designs for two of the most high-traffic pages on the WordPress.org site — the Homepage and Download page. The new look & feel builds on the updates that rolled out to the News section last year, putting a more modern and jazzy spin on the WordPress brand.

Making the Site Editor feel more like a design tool

Inspired by the style variation video we’ve been looking at ways to elevate key site editing features (styles specially) in the overall experience, so that the site editor feels more like a holistic design tool rather than a template editor.

Rethinking WordPress.org Navigation

Inspired by some discussion on the Make Meta blog, we’ve been exploring how to clean up and simplify the navigation on the WordPress.org site.

Copy improvements in Openverse

As a quick win in the openverse search experience, we shared a design idea to improve the copy on some pages and make Openverse more clear. Having the search engine inside the WordPress site makes it difficult to convey what is about.

Styles update in Openverse

In the current version of Openverse, text styles are defined per component and differ when placed together. We started exploring a style update to clean and centralize all styles to make the search more consistent.

Placeholders

A literal placeholder style with a dashed line has been used in a few places to indicate the ability to add a featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. or a a site logo. This style has been expanded to the Image 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., which now visualizes an inherited duotone 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.. The placeholder also features a blurred background to set it apart in stacked contexts. Tickets/PRs: ImageSite Logo/Featured ImageImage radius and duotone + more

Inspector grid

With ongoing component work and cleanup, here’s a visualization of how inspector components should naturally lay themselves out.

Pre-publish sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. summary section

We continued exploring the pre-publish sidebar with a version that improves the readability of the sidebar by integrating the suggestions inside the main summary section.


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: Aug 1–12

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

Twenty Twenty-Three default theme kickoff

An experimental new process was kicked off for designing the style variation-focused Twenty Twenty-Three theme with a post on the Make Design blog. Join us in 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/. channel: coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-themes-projects.

Visual template building

A number of recent / upcoming developments present an opportunity to implement a more visual, and flexible template creation experience. @jameskoster explored more here.

Pre-publish sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. summary section

@javiarce published a proposal to improve the pre-publish sidebar with a summary section that includes the document title, excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox., featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts., tags, and categories. 

Editor welcome guide with setup

We have a number of useful appearance and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) options in the Editor. To enable folks to customize their editing experience from the get-go, @jameskoster has been exploring a way to surface these options as a part of the on-boarding process. He recently shared a post on the Make Design blog requesting feedback on the proposal.

Openverse 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.

@fcoveram continued with the Openverse header, this new version proposes shifting the content type and filtering on a popover without leaving the page.

Global Styles previews

When customizing 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. defaults (in Global Styles → Blocks), there isn’t always an in-canvas preview present for the block you’re customizing. By including a preview in the inspector, you can nevertheless get a sense of your changes. @joen explored this in a ticket.

Stepped Slider

The stepped slider is a new 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. control that lets users take advantage of preset spacing values. The effort unearthed some interesting challenges around how to present indeterminate states, and the control is likely to evolve further in the future. Dive into the conversation on the ticket.


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 Slack.

#design, #design-share

Design Share: July 18–29

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

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/ redesign

Last week, new designs were shared for the Homepage and Download pages — two of the most high-traffic pages on the WordPress.org site. Props to @beafialho and @javiarce for the beautiful design work.

Design Library

Clean up of all the icons of the Design Library is ongoing, with flattening the icons being a first step to fix the color overrides of the library. The instructions have also been updated to indicate what’s the preferred internal structure. @javiarce started testing the new functionalities that Figma introduced recently, which will allow us to simplify the components and make them easier to use.

Openverse 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.

@fcoveram has been iterating on the Openverse header component, taking a new approach to simplify the navigation and content interaction.

WordPress Jobs

@javiarce created a header and avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. for the WordPress Jobs Twitter account.

The next default theme

There’s also a proposal on the Make Design blog for a new approach to the annual default theme. What if, instead of emphasizing the theme itself, we highlighted an opinionated set of style variations designed by members of the community? The idea is to use Twenty Twenty-Two as the basis for a new theme that’s stripped back and minimal — a blank canvas to let a diverse range of style variations shine.


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/. or message @critterverse.

#design#design-share

#design, #design-share

Design Share: July 4–15

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

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/ redesign — call for input

A kickoff post for the redesign of the WordPress.org Homepage and Download pages was shared on the Make Design blog recently:

With a new design style making an appearance in various places across the site, it seems like a good time to turn our attention to the home and download pages, two of the most-visited pages on WordPress.org and a well-worn path for those coming to experience WordPress.

@eidolonnight

Please share your ideas about how you envision these two pages taking shape directly on the post!

Design Library updates

Several new popovers have been added to the WordPress Design Library, like the “Publish” and “Color” popovers. They can be found in the “Views & Stickers” page of the library.

Navigation 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. bulk insert

@javiarce shared a prototype for inserting several items at once for the Navigation Block to ease the creation of new menus. Check out the design and prototypes, or weigh in on the original issue.

FSE usability testing

A number of design contributors volunteered to run usability testing sessions as a part of this month’s Full Site Editor outreach call for testing. @annezazu published an excellent recap of the testing sessions that’s full of valuable insights about some of the difficulties users encountered. Huge thanks to @javiarce @estelaris @ericcarco and @colourpress for conducting these sessions!


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/. or message @critterverse.

#design#design-share

#design, #design-share

Design Share: June 20–July 1

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

Open Sourcing Theme Designs

@beafialho introduced an initiative to make theme designs available on the WordPress.org Figma. Users can now explore the designs for popular themes such as Stewart, Archeo, Pendant and Wei. If you’d like to add your own theme design, you can get started using the Theme Template file.

Props to @richtabor and @annezazu for helping with this effort ✨

Create a template for a specific post

@jameskoster contributed to a Site Editor enhancement which facilitates the creation of templates for specific entries 🎉 It’s not all that much to look at, but is a powerful tool that took quite a bit of wrangling to get right.

Controls for interactive states

@javiarce contributed to the first iteration of a project that will allow people to customize the different interactive states (:hover, :visited, :active…) of elements like buttons and links. This first version only allows customizing the :hover property inside the Global Styles 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. using a simplified interface, but it’s a first step towards implementing a more comprehensive and powerful UI (like the prototype in the video). Design of the functionality.

Status & Visibility popovers

@javiarce is also continuing to work on the reorganization of the Status panel for pages and posts. Following the redesign of the Publish popover, two more panels have just been integrated into the top section of the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. and transformed into popovers: the URL panel and the Template settings panelDesign of the Status & Visibility project.

Openverse — Audio track navigation

@fcoveram proposed a new way of interacting with the audio track to meet a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) requirements and improve the browsing experience while previewing audio tracks.

Openverse — 3D model support

@fcoveram has been working on the 3D model integration by designing a new component with a rotation effect, a new search results page, and improving the existing All content results.


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/. or message @critterverse.

#design#design-share

#design, #design-share