Mark Uraine 9:21 pm on August 28, 2020
Tags: , ,   

Gutenberg Phase 2 Friday Design Update #60

Welcome to the weekly account of 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/ design updates!

Recently merged

In progress

WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor & Legacy Widget 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.

The Widget screen and the process for adding widgets to the document is undergoing some design revisions. We’re hoping to get this completed soon and making these more visible in the pluginPlugin A 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.

Navigation Editor & Navigation block

The Navigation screen recently got some updates and a prototype. Take a look and provide some feedback!

Template parts

Working with template parts in full site editing is tricky. A user flow for this process is being explored.

Block Directory

The Block Directory just got an updated prototype exploring new UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. flows.

Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Mark Uraine 5:56 pm on August 21, 2020
Tags: , ,   

Gutenberg Phase 2 Friday Design Update #59

Gutenberg 8.8 was released this week! While there was no “Features” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the changelog, there were plenty of “Enhancements.” Two of the more visual enhancements included:

  • The mover icons were separated from 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. icon in the block toolbar.
  • The top toolbar button color was made to look clickable now.

In Progress

Two features aimed for the 5.6 release are the Widgets and Menu screens in wp-admin. These are undergoing a large amount of redesign right now to include blocks in intuitive ways while still supporting the wonderful features everyone is accustomed to within those screens.

WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

The Widget Editor is being explored as a single widget area editor that offers a way for users to switch between areas.

Navigation block

The Navigation block is seeing some alternative display explorations like a full-screen overlay as an option.

Block Directory

Recent flows around the Block Directory are being redesigned.

Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2

Tim Hengeveld 7:20 am on August 21, 2020
Tags:   

Design meeting notes 19 august

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can 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 by following the instructions in our handbook.

Housekeeping

  1. We still need volunteers for note-taking

If you’d like to help out, note-taking is a great way to get started. Just pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @estelaris or leave a comment

2. Next Show-And-Tell is on August 26. A Show-and-Tell is where we all get together on Zoom (video chat) to say “hi” and check out the latest design work happening across WordPress.

Updates

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/

  • @itsjonq has been working on @wordpress/components and working to improve them including a guide on how to get started prototyping with them.
  • @shaunandrews has continued work on the 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. as well as the navigation page (menus.php)
  • @mapk is working on widgets integration and the accordion block
  • @noahrshrader is exploring on Global styles and working with developers on the latest implementation of Multi-Entity Saving
  • @michael-arestad is starting in on block directory work

These issues could use some eyes and discussion:

Figma design libraries

@noahrshrader is also still working on the Figma design libraries. He was busy with other things but plans to tackle CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. (WP Admin) components within the next week or so. He’ll keep us updated.

HelpHub

@estelaris brings news from the Docs team. During the selection of the Google Season of Docs, two of the projects from the docs team were selected. One of them is the reclassification of the articles. You can read all about it here https://make.wordpress.org/docs/2020/08/18/season-of-docs-2020-projects-move-forward/

@estelaris will mentor a technical writer, and they will work with the marketing team to help make a style guide (writing, voice and all that). For the design team can help out with a new navigation in the documentation area. The team will bring updates to this meeting as they start working.

Calls For Help/Feedback

@estelaris is also working on a WP style guide, with a working draft here. One problem is that 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/ is built in several systems it is very difficult to maintain the same style. So @estelaris has been looking for elements where we can set some sort of “min/max rules”. like type size for body min 16 px/ max 18 px. If any of you have better understanding of how .org is built, please add comments on what can and cannot be edited.

Main topics

The main topic today was to discuss a strategy for unifiying the design elements of Gutenberg, the rest of the admin, and the Site Health area, into one consistent design language.

This is a big topic, so the suggestion was to start small, beginning with porting over the base components, like how the button was updated in WP 5.4. Then, we’ll need to start looking at specific patterns to update (headings, tables, etc). Some pages will require more extensive work than others to bring them in line. There’s also the matter of Gutenberg being built in ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. and the rest of the admin being built differently.

@estelaris and @karmatosed are part of the WP 5.6 release, so they will try to already get some components worked in by then.

Picking a page and designing possibilities to align with Gutenberg components seems like a good start. @michael-arestad suggested the pages Comments, Tools and Settings as they cover a wide variety of components.

@michael-arestad and @snaushads will try to bring some early explorations to the Show And Tell next week.

Open Floor

@snaushads would like some feedback on https://github.com/WordPress/gutenberg/issues/24593.

#meeting-notes

Noah Shrader 6:49 pm on August 20, 2020
Tags: , , , hallwayhangout   

Designer Hallway Hangout – 8/20/2020

Below is a recording from today’s Hallway Hangout with some awesome folks from the community, hosted by Joen Asmussen and Noah Shrader. This was a casual, remote meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. where we shared ideas and demos of some current design efforts in flight.

The topics of discussion were around the new WordPress Design Library, and some of the color refresh work being done to 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. If you’re a contributor, or want to be a contributor to the design of WordPress, you might find the content helpful!

Links referenced in the video:

You will need permission to view/edit the new Figma WordPress Design Library. To request access, pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” the #design channel 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/. and someone will get you added in Figma.

#colors, #figma, #hallwayhangout

Tim Hengeveld 2:29 pm on August 18, 2020
Tags: ,   

Design meeting agenda for 19 august 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the 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/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

  • Housekeeping
    • We still need volunteers for note-taking
    • Next Show-And-Tell is on August 26
  • Updates
    • 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/
    • HelpHub
    • 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/ styleguide
  • Calls for help
  • Main topics
    • Let’s discuss a strategy for unifiying the design elements of Gutenberg, the rest of the admin, and the Site Health area, into one consistent design language.
  • Open floor

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

Estela Rueda 3:07 pm on August 13, 2020  

Design meeting notes 13 August 2020

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can 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 by following the instructions in our handbook.

Housekeeping

We are looking for a volunteer to help with note-taking during meetings. Anyone interested, either leave a comment here or let us know in the Slack channel.

Updates

@michael-arestad brings us an update on 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/ design work:

WordPress 5.5 was released! Nice work on the About page design and props to everyone involved in the release! Design updates:

If you are new to the design team, go ahead and click on those links, check out the great work the design team is doing in the block editor.

Open floor

@nrqsnchz brought up PR 16053 for Gutenberg work on autosave post versions. Please leave your comments on that PR

#meeting-notes

Estela Rueda 9:20 am on August 12, 2020  

Design meeting agenda for 12 August 2020

This is the agenda for the weekly design chat meeting on Wednesday, August 12, 2020, at 18:00 UTC in the #design channel of the 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/.. You can join the Slack channel by following the instructions in our handbook.

  • Housekeeping
  • Updates from any specific focuses
    • 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/
  • Open floor

This meeting is held in the #design channel in the Making WordPress Slack.

Leave a comment if you would like something reviewed, discussed, help or something added to the agenda.

#meeting-agenda

Tim Hengeveld 8:09 am on August 6, 2020
Tags:   

Design meeting notes 5 August

These are the weekly notes for the design meeting that happens on Wednesdays. You can read the full transcript on our Slack channel and find the meeting’s agenda here. You can 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 by following the instructions in our handbook.

Housekeeping

During the month of August, both triages (coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and 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/) will be short, for 30 mins only. We will resume our normal, one hour long triage session on 1 Sept. Also, if anyone would like to volunteer to take notes or lead a triage session, please lleave a comment or reach out to @mapk (for Gutenberg triage) or @estelaris for core triage.

Updates

@michael-arestad brings us an update on Gutenberg design work:

Gutenberg 8.7 was released today! And here is the plan for Gutenberg in August.

If you are new to the design team, go ahead and click on those links, check out the great work the design team is doing in 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.

Calls for Help/Feedback

The Training team sent us a call for help on designing the new learn.wordpress.org. @melchoyce has agreed to help them out.

Main topics

The WCUS team has reached out to ask if the design team is interested in participating on a 24hrs contribution day. There are no details yet, they are asking around to find out how many teams would be interested.

The Theme team has also been interested in participating and would love it if we could team up and work through some designs for long outstanding tickets they have been wanting to get through.

So we can say there is interest in this, and we’ll keep bringing this up in the next few meetings to get more input. If you have thoughts about this, please leave a comment.

Open floor

@mapk was wondering how we might get more people working on Gutenberg issues. What can we do to share more current work, and request feedback or even use some time to help community designers jump into specific Gutenberg tasks? The triage sessions have been wonderful, but those tend to focus on older issues, and the Gutenberg updates don’t really spawn much activity.

The idea of a design mentorship or dedicated Gutenberg sessions during our design meetings was floated. What do you think? What would you need to start contributing (more) to the visual development of the block editor? Let us know in the comments.

Lastly, @aristath brought up the point that the font size on .org is too small. This is a point that has been raised by 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) experts before in regards to the WP interface too. There has been work done to see if we can increase the size, but WordPress is a massive project, and not every area fully adheres to the style guidelines – insofar as those exist. We have guidelines for core, but not for metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.. @estelaris will take charge on writing a draft for those and bring them to the 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) and meta team, and to us, next week in the design meeting.

#meeting-notes

Tim Hengeveld 4:20 pm on August 3, 2020
Tags: ,   

Design meeting agenda for 5 august 2020

This week’s meeting will be held at 18:00 UTC tomorrow in the #design channel of the 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/.. You can join the Slack channel by following the instructions in our handbook.

Here are the suggested topics:

If there is anything you would like to see added to the agenda, please leave a comment also.

#meeting-agenda

Mark Uraine 9:52 pm on July 31, 2020
Tags: , ,   

Gutenberg Phase 2 Friday Design Update #58

Hey there! Gutenberg 8.6 released on July 22. Let’s review some of those features and then dive into some design updates.

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

  • All the updated patterns are included.
  • The Cover 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. now supports focal point for video backgrounds.
  • Site icon is displayed in the topbar of the Editor in full-screen mode.
  • For anyone converting Classic editor content to Gutenberg blocks, the button on the Classic block has been surfaced higher for easy access.
  • etc.

Work in progress

Document display & settings

The recent iterations have explored moving the settings out 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 into another location.

https://github.com/WordPress/gutenberg/issues/20877

Multi-entity saving

While making changes to content, templates, and template parts, WordPress should communicate these changes and what is being saved to the user. Recent iterations explored how a user might save out their changes separately.

https://github.com/WordPress/gutenberg/issues/20474

Icons

The new icons in the Block Editor are wonderful. However, many additions are needed to support the work being done on full-site editing. Some recent explorations are focused on the Post blocks which will be used in creating templates.

https://github.com/WordPress/gutenberg/issues/24175

Browse mode

This particular issue aims to aide in browsing one’s site by clicking links on their page to jump to those pages and posts. Some prototypes have been posted recently and can use some feedback.

https://github.com/WordPress/gutenberg/issues/23328

Get involved

Now is a great time to get involved. While the work on this project is intense, it is always important to glean new perspectives from other WordPress users and community members. Just drop into any of the links provided above to read up on the details, contribute, and leave feedback.

Thanks for reading, staying informed, and contributing anywhere you can!

#design, #gutenberg-weekly, #phase-2