Archives

Enrique Sánchez 9:26 pm on July 24, 2019
Tags:   

Design meeting notes for July 24, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. 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.

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/

 Gutenberg 6.2 release is being pushed back a week.

@mapk requested testing on the following PRs:

Mark also added that there’s been a lot of improvements to the Table block.

@melchoyce asked for more feedback on the Block Directory.

Component Audits

@drw158 shared that the component audits he’s been doing are all done. 🎉 He’s been auditing each ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 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. component that Gutenberg provides while looking for opportunities to improve naming, structure, composition, and visually-related props. Here’s more background on why we’re doing them and as always, feedback and discussion are most welcome.

Discussion

Design team TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board

@karmatosed has been doing some triage and commented on a few cards on our Trello board. (If you can’t see the board, comment on this thread in Slack to be added).

WordPress style guide in handbook

@karmatosed has been going through and seeing what can be added, removed and/or adjusted on the handbook style guide. She has come up with a list of suggestions and documented them in this spreadsheet. Your feedback is welcome and can be left in the comments of this post.

Open floor

@kjellr shared the unstyled Gutenberg starter theme. This theme is built to easily test unstyled Gutenberg. He’s been working on it and aiming to submit to the Theme Repo later this week so it’s available to more folks.

#meeting-notes

Mark Uraine 9:37 pm on July 12, 2019
Tags: , ,   

Gutenberg Phase 2 Friday Design Update #26

Happy Friday y’all! Gutenberg 6.1 was just released Wednesday.
“ヽ(´▽｀)ノ” Included in the release are some great motions for reordering blocks. I’ll add that while 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/ 6.0 took hit on performance, it been optimized better in 6.1.

Widgets to blocks

There are some really great experiments being added to 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.

  • New Customizer Panel to edit 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.-based 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. areas.
  • Add the block inspector to the widgets screen.
  • Add a global inserter to the widgets screen.

Block directory

A recent post went up concerning the wp-admin concepts. Block Directory in WP-Admin Concepts @melchoyce has done some wonderful work here to get the conversation started.

Tightening up

Usability Testing

Several people took the usability test during WCEU. Part 1 and Part 2.

I’ve also recently posted the usability tests from June. Watch the videos and leave some feedback!

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

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

Mel Choyce-Dwan 7:53 pm on July 11, 2019
Tags:   

Block Directory in WP-Admin Concepts

You may have spotted during @matt‘s Summer Update at WCEU a new wp-admin section for Blocks. I wanted to share those early concepts here.

View Figma Prototype

About Blocks

Rather than jumping straight into a list of blocks, I wanted to explore what an introduction to blocks could look like as a landing page. This page could feature some links to tutorials (that could open either externally, or in a modal), some basic FAQs, and a support link.

You’ll notice the new 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. style, inspired by the new Health Check screen and built on some concepts from the Design Experiments plugin. This new section provides a good opportunity to expand on this pattern, and to show how it could benefit WordPress users by providing context to each screen.

Add New Blocks

This section is largely inspired by wp-admin 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 cards, and 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/ plugin details screen.

I also think we should update across wp-admin as well, since the current modal feels very outdated and doesn’t present information as cleanly or as organized as the .org modals:

  • WordPress.org
  • wp-admin

Inside the modal, you’d also be able to demo 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. before installing. @ck3lee has figured out how to make this possible 🎉

We’d tap into the Shiny Updates framework to make installation and activation quick & easy.

The upload flow would work the way plugins do — I’ll flesh out some designs around that in future iterations.

Installed Blocks

This screen would be a list of all installed third-party blocks, so you can activate, deactivate, delete, etc. in bulk, using a traditional list table. I’ve added an “instances” link, which would show all posts and pages the third-party block is being used in.

Manage Blocks

This is the screen I’m most “meh” about, which is pretty much a duplication of the block management modal inside the editor. I think we need to have this management available within this section, but I’m not sure if this is the best approach to tackling it.

Reusable Blocks

Currently, the only way to reach the Reusable Blocks screen is through either the block library inside the editor, or a link in the settings dropdown in the editor. Putting it in a new Blocks section gives it an easier-to-find home.

Feedback

These are still early concepts, so it would be good to get some early impressions. Specifically, I’d like everyone’s thoughts on:

  • Thinking through the flow of managing blocks on your site, does it feel like any important tasks are missing from these concepts?
  • Would you expect any of these screens to be combined?
  • Can you think if any stress cases these screens will need to account for?
  • What would you like to see next for the Block Directory? Are there any other block management features you would benefit from?

#block-directory

Estela Rueda 8:14 pm on July 10, 2019
Tags: ,   

Design Meeting Notes for 10 July 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

Housekeeping

WordPress User & Developer Survey

There is a call for feedback on the Updates to the WordPress User & Developer Survey. @melchoyce asked if we wanted to discuss any questions as the design team. 

Two suggestions by @mapk:

  • What is the one thing that you struggle with most in WordPress?
  • What is something you know now about using WordPress that you wish you knew earlier?

There is also a discussion about whether this is focused on developers or end users, as having both as survey targets make it very difficult to narrow questions. 

@melchoyce clarifies that the survey is mostly publicized through WordPress.org and provided a link to data from previous years to guide us in our choices.

@karmatosed suggested we read the data and provide our suggestions as comments and insights as feedback on the post mentioned above.

Topics for next meetings

Another call is to add discussion topics for upcoming meetings. @karmatosed suggested that next week we focus on the TrelloTrello Project management system using the concepts of boards and cards to organize tasks in a sane way. This is what the make.wordpress.com/marketing team uses for example: https://trello.com/b/8UGHVBu8/wp-marketing. board and decide what needs to be done. @youknowriad asked how to access the Trello board.

@PiotrGawinski is a new member and would like to find a small project to get involved with and @boemedia recalled the link for Calls for Design column in Trello.

Updates

@mapk let us know that Gutenberg 6.1 was released today! It includes some really cool enhancements with lots of people contributing. @youknowriad gave us some explorations to look through:

  • Live Drag and Drop 
  • Edit/Navigation Mode (mostly for 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) but touches on design) 

@drw158 shared a component audit he’s been working on to clean up the component library as it has grown and exploded to places beyond the editor. The audit is related to naming, structure, and composition, not code audit, so designers at any level can contribute and it is on the ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. component library, not the Figma component library.

The first issue opened is related to the ButtonGroup and Toolbar.

Discussion

@dingo_d from theme review team is looking for designers to help create a better preview for themes on 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/, including better-looking demo data. The demo data should be used internally and perhaps theme developers can use it too. For reference, here is the old meta-ticket.  The demo should showcase 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/ blocks, as an example, see Chaplin Theme. 

To clarify the problem, look at Theme Twenty Nineteen in WordPress.org, it has a great theme screenshot, but the “preview” doesn’t look like the screenshot. It is missing elements like logo, nav, 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., etc. It doesn’t show off the full potential of the theme. To resolve the issue, there is a separate demo site. The XML demo data should be imported using the default importer. There is an .xml for Twenty Nineteen but it doesn’t contain menus or widgets. #meta must add those manually. 

For step 2, we would like to have the option to change the presets of the demos data in the previewer, like chose between business/site vs. blog styles (business, portfolio, blogs, etc.)

So far actions go on tracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. ticket:

  • 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. ticket needs updating to have everything linked (there seems to be a lot of unlinked things).
  • Volunteers to take existing data (hopefully linked) and start working?

@williampatton will clarify actions and smaller tasks for design needs on trac ticket and design team has agreed to cross collaborate with themes team.

Open Floor

@melchoyce shared an opportunity to getting involved with usability testing. And for designers looking for small tasks, there is always the Meta trac. Try to stay away from anything titled “Redesign (big section for WordPress.org)”

#meeting-notes

Tammie Lister 5:22 pm on June 25, 2019  

Design meeting agenda for Wednesday 26th June

This is the agenda for the weekly design chat meeting on Wednesday, 26th June 2019, 18:00 UTC.

  • Housekeeping
  • 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/ design update: @kjellr
    • 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. directory update: @melchoyce
  • Open floor

This meeting is held in 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/..

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

#meeting-agenda

Mark Uraine 4:45 pm on June 14, 2019
Tags: , ,   

Gutenberg Phase 2 Friday Design Update #22

Hey everyone, happy Friday! ヽ(•‿•)ノ I want to thank @kjellr for handling the update last week while I was away.

Gutenberg 5.9 was released Wednesday! As @youknowriad pointed out, there were over 40 contributors, and 6 of them submitted their first PR.

A few noteworthy features and enhancements included:

Widgets to blocks

Included in 5.9 were a couple improvements for the widgets screen.

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

@melchoyce posted an update to the Block Directory. There’s a prototype and some mockups for review. If you haven’t offered up some feedback, please do! Mel is looking to have a usability test written for Contributor DayContributor Day Contributor Days are standalone days, frequently held before or after WordCamps but they can also happen at any time. They are events where people get together to work on various areas of https://make.wordpress.org/ There are many teams that people can participate in, each with a different focus. https://2017.us.wordcamp.org/contributor-day/ https://make.wordpress.org/support/handbook/getting-started/getting-started-at-a-contributor-day/. at WCEU.

Tightening up

This week several designers spent time cleaning up loose ends and making small improvements throughout 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/.

Usability testing

Last month’s usability testing videos are up on make/test. Please review them and leave some feedback about your observations.

Another reminder that there’s a plan to run a usability testing table for Gutenberg at WCEU. Read about the plans and sign up to get involved.

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

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

Mel Choyce-Dwan 8:33 pm on June 7, 2019
Tags: ,   

Block Library: Mockups & Prototype

This is an update to the Block Library project that’s in-progress. Feedback has been taking place on GitHub and in Figma. My thanks to all the folks who have chimed in to help improve these mockups!

Prototype

A screenshot from the Figma file, for illustrative purposes.
Figma: Source File / Prototype

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

Installing a third-party block from the block directory, via the block inserter

Search Results

If you search for a block, but nothing installed in your block library shows up, you’re presented with third-party blocks that show the block icon, title, author, and rating. Pressing on a block brings up more details.

Details

The Details screen is similar to 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 cards we see in the Plugin Directory. It’s an abridged version of the block information, showing icon, title, author, star rating, and description. (This would ideally use the short description that plugins provide for cards.)

“More Details” would bring you to the full details screen in the Block Directory, and “Add” inserts the block into your content.

Installation

Once the block is inserted into your content, WordPress would ideally start silently installing it in the background while you fill in placeholders and change settings. If you change your mind and decide this block doesn’t work for you, WordPress would deactivate and delete the block when you remove it from your content so you don’t end up with a junk drawer of discarded blocks in your library.

What happens if your installation fails

In some cases, the installation won’t work — for example, if your internet cuts out while trying to install the block. In these cases, WordPress needs a way to recover from that error. This flow explores when a block isn’t able to be silently installed.

Pre-Publish

If you have the pre-publish panel enabled, you’ll see another reminder that you’ve added new blocks to your site, and another Details link that’ll take you into the Block Directory, in case you want to review it again.

Next Steps

  • The design team will look at creating tests for this (or testing it out themselves) during the WCEU Contributor Day; look for a recap on this p2 afterwards.
  • Between now and then, the prototype will continue to be open for feedback and iteration. I’d like to have all feedback for round one of testing in by Wednesday, June 19th, so I have time to iterate before WCEU.
  • You can comment with feedback here, or directly in Figma, if you’re a part of our team account (You can ask for access in #design).

#block-directory, #block-library

Estela Rueda 9:06 pm on June 5, 2019
Tags: ,   

Design Meeting Notes for 5 June 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

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/ phase two

@kjellr let us know that The ability to Group and Ungroup selected blocks was merged in today. Also, temporary “Snackbar” notices have been introduced.

A reminder that the experimental Gutenberg widgets page is live and 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, feel free to leave feedback or follow along.

@mapk would like some more thoughts on category labelling and grouping for blocks.  

And finally: @joen’s “clickthrough” PR to help improve nested block interaction is sorting out some technical details, and will land soon.

For further reading on these points, check out Friday’s update.

@karmatosed reminded us of an additional plan to run a usability testing table for Gutenberg at WCEU, as planned at the WCUS table last year.

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

@melchoyce mentioned there are lots of chatter going on regarding block directory and the comments are helping updating designs in Figma. A new post on this will be up at the end of the week, in the meantime, keep commenting on GitHub.

On the same topic, @marybaum volunteered as a copywriting organizer to audit all the new strings. The audit will be helpful when handling the temp strings to dev, as G 5.2.2. is expected to launch by June 25 or 26. And testing of the new strings should start by early July.

Discussion

WCEU contribution day tasks

@karmatosed came up with plan based on feedback for the design table at #WCEU.

Morning

  • Welcome and guide to everything you need to know to contribute to design: quick under 30 mins – @karmatosed
  • Split into groups!
  • Gutenberg design group – @mapk
  • Figma library organizing group – @tinkerbelly
  • Possibly a testing group for block directory – by itself or done at the same time as triage facilitated by @karmatosed
  • Triage group: this will be done through 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/. to give others an opportunity to join in/be visible – @karmatosed

Late afternoon

  • Get back together and have a chance to talk about what was done.
  • Wrap up.

Participants are free to sit in any group and change in between if they want to learn about something else.

Open floor

Experimental plugin

@kjellr developed a plugin that will allow us to experiment with designs. Figma is great for making static comps and simple prototypes. TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. is great for getting polished code published. But as a design team, we don’t have a great place for work that lies in between those two poles. This plugin + repo is a place to try out half-baked ideas in the context of WP-Admin

It works as a plugin – download & Install it – and can be used to:

  1. Try experiments. Download & install the plugin on a test site to give existing experiments a try. They can be activated on the settings page (`General > Design Experiments`). Each experiment includes a link to a 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/ page for discussion and feedback.
  2. Build and submit your own experiments. There are instructions in the repository for this.
  3. Share ideas. Submit mockups or written ideas, and maybe someone will run with it and build out a prototype.

The use of italics

As designers, we are exploring how to build a better text hierarchy for WP-Admin and Gutenberg.

Today we discussed italics and @kellerj mentioned a ticket with examples as to why Avoiding italic text is better for accessibility and readability and there are also talks about changing the use of italics in Gutenberg.

Our next steps are to define when the use of italics is appropriate – @melchoyce and to get a definite consensus on the text treatment for help text underneath form fields

Figma Library Organization

@drw158 gave an update on the library organization in Figma and they are almost done with all of the base UI components in WordPress/components.

Feedback and evaluation would be great (accuracy, consistent naming, constraints testing, etc). Next documentation will be added and deprecate the existing libs and publish new ones. @karmatosed mentioned that deprecated links need to be fixed or relinked also in the handbook.

Icons from dashicons GitHub have been added and there should be a new library called  ‘WordPress 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.’ for Meta components in Gutenberg.

#meeting-notes

#meeting-notes

Enrique Sánchez 9:44 pm on May 29, 2019
Tags:   

Design meeting notes for 29 May, 2019

These are the weekly notes for the design meeting that happens on Wednesday’s. You can read the full transcript on our Slack channel and find the meeting’s agenda here.

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/ phase two

Gutenberg 5.8 was released! Yay! @mapk noted that this release includes some performance improvements along with some really cool features. He also asked attendees to look into some relevant pull requests in 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/:

He invited everyone to try out Gutenberg 5.8 and play with the new 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.-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. areas screen, found on the Gutenberg 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 wp-admin 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. menu.

There’s also a new proposed flow for column layout suggestions. @kjellr prompted everyone to offer feedback.

Block directory

There’s new updates on the block directory by @melchoyce. @mapk noted that there’s a new map of the experience flow, and lots of sketches that could use feedback.

Discussion

Font sizing increases

@hedgefield shared how at Yoast they sometimes have had to deviate from Gutenberg’s default styling due to the default font size being too small for them to accommodate several heading levels, so there’s been talk about the possibility of raising the default font size in WordPress.

The team discussed different font size options and what would be the best choice considering 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) and internationalization. There was consensus around the idea of trying out different options on Figma mockups or via the browser’s web inspector. @hedgefield will try these suggestions and report back next week.

Figma organising

There’s agreement on some things we can do to better organize the Figma libraries:

  1. Splitting one library into a few smaller libraries.
  2. Component naming: looks like mirroring the code naming convention is a good path forward, e.g. “TextControl”.
  3. Establishing an organisational structure for components.

As for component naming, @drw158 proposes just adding a space so it’s more human readable, e.g. “Text Control”.

@drw158 and @tinkerbelly will be volunteering to move this initiative forward in the next week or two.

Open floor

Block-based vs. inline color controls

Seeing that there was time left in the meeting, @kjellr added this discussion topic that was initially raised by @paaljoachim. The team agreed to create a text level color issue on GitHub to further explore this idea.

#meeting-notes

Mark Uraine 5:43 pm on May 24, 2019
Tags: , ,   

Gutenberg Phase 2 Friday Design Update #19

I hear some countries have a longer holiday this weekend, so I hope everyone enjoys their time off and gets the rest they need. In the meantime, 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/ keeps progressing.

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.

@tinkerbelly posted an IA flow for the block with some ideas around existing menus and new menus. Take a look and leave some feedback.

Widgets to blocks

This is picking up again with lots of PRs coming together to explore different parts of the puzzle. If there’s a particular PR you’re interested in, please jump in with your thoughts.

Block Directory

@melchoyce posted a competitive analysis for the new Block Directory. Some great insight is gained there to help inform the design decisions on this. I get so excited when I hear about previewing blocks in the editor before installing them. I encourage everyone to contribute to that conversation.

Design explorations on the Block Directory will be posted today on 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/.

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)

The issues created from the accessibility audit are still moving forward. Many of the low hanging fruit have already been completed. The efforts are now being moved toward the larger and more impactful issues.

Next Friday’s accessibility chat in 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/. will save some time to discuss the keyboard navigation issue. This is a long standing issue that really requires some thought around how everyone views the editor. Is it a continuous view of content, or an application of blocks? With either of these comes a different approach as to how keyboards might navigation the interface. Some good issue to catch up on for this were listed by @afercia:

  • https://github.com/WordPress/gutenberg/issues/15322
  • https://github.com/WordPress/gutenberg/issues/11581
  • https://github.com/WordPress/gutenberg/issues/13663
  • https://github.com/WordPress/gutenberg/issues/5694

Tightening up

I’d really like to see more work on both the Columns block and the Table block in the next few weeks. There’s been some great enhancements lately, so I’d like to keep that movement going.

The color options for blocks is an interesting conversation. Everyone who has voted, (8 total votes) has voted to include both text and background color options for all text blocks. But there was an interesting suggestion which @tinkerbelly also commented about leading us to more explorations around how we introduce background color for the text blocks.

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

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