You don’t need edit access to use the Figma libraries, you can copy components from there into your own drafts. If you’re a contributor with the ability to grant edit access, please be mindful, and downgrade to view access once the initial need for edit has waned.
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 blockBlockBlock 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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
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 blockBlockBlock 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
Before/After
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
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 blockBlockBlock 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
Before/After
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 imageA 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 LoopLoopThe 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.orgThe 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.
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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
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.orgThe 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 imageA 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 blockBlockBlock 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 filterFilterFilters 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: Image, Site Logo/Featured Image, Image 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 sidebarSidebarA 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 SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
Hey everyone, just a quick reminder that there’s one week left to submit style variations for the TT3 default theme before submissions close on August 31st.
Design Team RepTeam RepA Team Rep is a person who represents the Make WordPress team to the rest of the project, make sure issues are raised and addressed as needed, and coordinates cross-team efforts.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
WordPress.orgWordPress.orgThe 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 headerHeaderThe 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 avatarAvatarAn 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 SlackSlackSlack 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.
Hi, all! Here are a few projects the Design Team has contributed to over the past couple of weeks.
WordPress.orgWordPress.orgThe 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
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!
Navigation blockBlockBlock 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 SlackSlackSlack 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.
@javiarce submitted a proposal for an interface to enable interactive states (:hover, :active, :focused, etc.) to specific blocks’ properties. Design and prototype.
@jameskoster is working on designs to consolidate the various pattern browsing experiences into a single component.
PluginPluginA plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party Dependencies project
@fcoveram has been working on integrating 3D model content in Openverse results by creating new components and layouts for results and single result view.
Openverse Design Library updates
@fcoveram started updating the Openverse Design Library by using the WordPress Design Library utility components. This sync aims to ease the design contribution onboarding.
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 SlackSlackSlack 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.
Hi, all. As mentioned in the meeting notes from our Show & Tell call earlier this week, the team has been discussing the possibility of moving our regular meeting to an earlier time on Wednesdays.
I’ve created a Doodle poll to try to get as many responses as possible about what time would work best for folks. The options I’ve included are the existing meeting time at 18 UTC, and options that would move the meeting up to 4 hours earlier. Please comment on this post if another time would work better outside of the proposed options!
You must be logged in to post a comment.