Block Directory V2

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. directory will be a place where blocks can be perused and installed. Think of it as a 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 directory limited to single blocks.

Back in December, @melchoyce proposed a prototype for a block directory. That prototype is still 100% viable for the block directory. It is likely the simplest to implement as it’s pretty close to the existing plugin directory with a few nice systematic updates to patterns used across wp-admin.

When I picked up this project, it made sense to me to try a variation of what @melchoyce created . I decided to see what a block directory might look like if it shared Gutenberg’s design language. To accomplish this, I tried using similar patterns and styles to what is seen within 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/ since the block directory and Gutenberg are so closely tied together. I also have been keeping block patterns in mind when designing.

The feedback I’m looking for

This is a hopeful proposal and none of what I propose here is set in stone. I would like higher level feedback around the interactions. Do the interactions make sense? Is it clear what you’re looking at? What are the designs missing or lacking? What could be improved?

I’m not looking for detailed design feedback like hover states or border colors. Those are important for sure and that type of feedback will be needed during implementation.

The prototype

Here is a rough Figma Prototype that shows a handful of the views in the block directory. Take note of questions you have as you look through it and please share in the comments below. I hope most will be answered as I break down each of the primary design patterns and views. 

Try the prototype.

The block card

The block card is designed to be a recognizable design pattern that, even without a preview, will convey that it is a block. You can see we already have a similar card proposed for implementation in Gutenberg’s block directory search.

I tackled this in a few places. To start, I identified block cards that can convey the most important information about a block at a glance. This is where I started diverging from the existing plugin directory.

I deviated from using a plugin icon and plugin 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. for two reasons.

  1. Blocks already have an icon by nature. This icon will be one of the main identifiers when interacting with blocks. I wanted to reinforce the connection with the block icon and the block as soon as possible. Thus, I replaced the plugin icon with the block icon.
  2. Blocks and Patterns are very visual. Rather than showing a somewhat arbitrary header image, I opted to show a preview of the block.

I trimmed down the amount of information present on the card. In this mockup, I show the Block Name, the Author, Rating, and Number of Ratings. I may add an indicator of active installs. Everything else will be shown on the Block’s Details View, which a user will need to navigate to in order to install a block.

The preview is a square because the block’s example can vary widely in its aspect ratio. We will need to do some work here to figure out the scaling and overflow details of previews.

The directory header

Mel designed an iteration of the wp-admin page header that makes great use of space, order of interactions, and hierarchy. I made very minor modifications to it resulting in what you see below. Ideally, this pattern could be used across all wp-admin sections.

It’s very simple. It has a page title, a description, primary actions, and secondary actions. The page title and description are exactly what you would expect. The primary actions are below the description and, in this case, include a search bar and upload button. The secondary actions are the help and settings buttons.

The directory view

The directory view is a combination of the header and groups of block cards.

Like the current plugins directory, the blocks will be in categories with “See all” links for folks who want to peruse a specific categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging..

The CTA banners Mel designed are ace so I expect we could use them as a way to highlight any number of topical subjects. Perhaps they could be used to promote block collections if we decide to go down that road at a later date.

The block details view

The block details view shows all the information surrounding a plugin. The current details view for a plugin relies heavily on a 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.. Much of the sidebar information seems directed at plugin developers.

The most useful information for a user is at the top. It includes ratings, active installations, compatibility, the block version number, and the install button.

The Demo section is an example of the block that a user can interact with. It is important the user gets a clear idea of what they’re about to install. The editor itself will be an instance of Gutenberg with some slight customization. The inspector will remain visible because many blocks rely on the sidebar controls.

The Reviews section shows two reviews along with rating totals. I would like your thoughts as to which reviews should show.

There are still some remaining pieces of information I would like to incorporate including contributors, a changelog, and a support section of some sort. This is also missing the Advanced View. Perhaps some of those missing items will fit better there.

wp-admin design implications

These designs include patterns that could be used elsewhere in wp-admin. For example, we could use the directory header pattern on the other directories and perhaps on all wp-admin pages. This would be one of several steps to align the design language of wp-admin and Gutenberg.

#block-directory

Improving Post New

Before I get into it, I’m going to need help to get some of these projects going. If you see something you’re interested in working on, let me know in the comments. The following project proposals are not intended to be a single feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. because they are separate projects with separate goals.

I could use your help with:

  • running usability tests
  • putting out a survey
  • design
  • managing some of these projects
  • development
  • testing (including 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) testing)

The process

Before we get into designing, we need to do discovery (research) and a clear idea of which specific problems we’re going to solve. All of these will require research, some usability tests, maybe a survey or two,

Potential projects

I did a bit of searching on TracTrac Trac is the place where contributors create issues for bugs or feature requests much like GitHub.https://core.trac.wordpress.org/. (and am still doing so) specifically looking for anything related to posting or content creation. I have started some initial researching on anything related to creating content. I looked as past usability tests. I looked at some feedback around WordPress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/’s editors as well. We can learn from some of the ideas tried there.

The following are a list of project ideas. If some get interest and traction, we will do a kickoff post for it (depending on scale) and I’ll add any resources/related information I’m aware of. Ideally, I’d like one of you to step up and lead a few of these if you have the time and are interested. If you have something you’d like to add as a potential project idea, please let me know in a comment.

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

@helen brought this up as a project idea and it’s a good one. Here’s the proposal:

When running user tests for post formats during the 3.6 release cycle, one of the most striking observations was that a majority of users had a hard time locating the Publish button at all. Because it’s typically in the top right, it’s possible it’s not on the screen, and is very disconnected from the general content workflow of writing and then publishing. The most common idea is to put the buttons in the bottom bar of the editor, since it pins and makes sense within a writing flow. There are, as always, other considerations to make, such as post types without an editor or various post statuses (another problem in the current box – you can’t actually have a private draft, because it’s the same field in the database). This project would likely involve multiple approaches, storyboards, mock ups, and lots of user testing through all stages.

Related ticket: #17028

Shiny saving

Currently, when saving or updating a post the whole page reloads. The page reload makes it easy to lose your place when saving or updating. Because of the page reload, saving feels slow.

My proposal is to introduce Ajax saving to prevent the page reload. This will introduce new problems to solve. We’ll need a way to provide feedback to the user about the status of a save. It will need to be accessible. I believe those are both doable.

Related tickets:

Toolbar remix

I’d like to see what we can do to improve the editor’s toolbar. This will likely include a bit of button shuffling and some style changes. For example, I think the drop down to select the type of text (heading 1, paragraph, preformatted) should be in the primary toolbar rather than in the kitchen sinkKitchen Sink When using the WYSIWYG (What You See Is What You Get) editor in WordPress, you can expand the capabilities to allow more options. This expanded area is called the "Kitchen Sink.".

Related ticket: #27159

Post New UX

I’d like us to take a look at the Post New UX as a whole. This might result in some mini projects/experiments rather than being a single feature plugin. I suspect the space could be utilized more efficiently. We can probably also make Post New feel a bit less overwhelming for newer users (I don’t want to remove functionality at all).

MetaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. physics

Metaboxes are helpful. That’s why we have so many of them, right? Let’s see what we can do to make them part of the posting flow rather than a bunch boxes of settings that we have to battle before publishing anything. This project will need a good amount of love and research and will need to consider how plugins/themes use or hijack them. This might be a good place to provide some patterns or suggested design practices as a resource for 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 authors.

Autosave

I think if we implement Shiny Saving, we can definitely have autosave functionality. When digging through WordPress.com editor feedback, autosave was almost universally loved. It does have some awkward issues with revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision., but I’ll talk about revisions in a second.

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

This is a bigger less-urgent project (unless we get Autosave in), but I think the revisions interface could use a bit of a rethink. It is currently a bit difficult to use and understand. I know @melchoyce had come up with some promising ideas during the community summit when we were discussing it with @adamsilverstein. This project will likely include some way to move between revisions quickly as well as potentially showing a different interface for viewing changes.

Don’t break my divs

It’s really easy to break just about any theme by forgetting to close a `div` or a `span` (and some other elements). I’m wondering if we can do something to warn users about unclosed 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. elements to give them some idea why their preview is looking funky. I wouldn’t try to autoclose tags.

Live preview

Wouldn’t something like a live preview (even if it’s tiny or off screen) be pretty handy? I think so.

Proofreading mode

I’ve had quite a few people request some sort of proofreading mode that allows them to comment/highlight/interact with post content. This is in the realm of projects I’m not sure are right for WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but might just be. Even if it isn’t, it could be a pretty dang rad plugin (if there isn’t one already).

Content blocks?

I was hesitant to add this as it’s been attempt a few times in the last few years (RIP CEUX). The idea of content blocks has come up again in conversation a few times over the last few weeks so I think we should revisit it with vigor. I know the Shortcake group is looking at an interface that might go hand in hand with a content 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. interface. The initial Shortcake implementation could be great first steps toward the block editor some of us dream about (or have nightmares about).

Thoughts?

If you are interested in tackling any of these, have a proposal in addition to these, or are have concerns/thoughts about a project, let me know in a comment.

 

#editor, #post-new, #publishing

Press This

Hi! It’s been a few weeks since we added our initial brief.

What is it?

Press This is a redesign with a focus on automation and speed.

Screenshot of Press This in action

 

 

Progress

  • We now have an alpha public release available for testing. We plan on pushing nightly soon. Beware: there be dragons.
  • Design elements are starting to fall in place. We are still iterating on placement and behavior of WYSIWYGWhat You See Is What You Get What You See Is What You Get. Most commonly used in relation to editors, where changes made in edit mode reflect exactly as they will translate to the published page., modal pop-out, embeds, settings, and Add Media.
  • More screenshots

Features

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. architecture of 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/tools is an as-pure-JavascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. app as possible
  • Currently AJAX driven, but ready to be switched to using the WP-APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. endpoints as they become available
  • Is backward compatible with the current version of the Press This bookmarklet as bundled in WP, but also bring its own, more powerful one with it
  • Can blog any web page found online, blockquoting an 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., including a selection of in-page images to choose from. Said images are augmented with 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. data to sort them in the order the site advertises to be best
  • Overrides /wp-admin/press-this.php and its behavior, so that we’re 100% backward compatible
  • Overrides the bookmarklet JS code provided in /wp-admin/tools.php
  • Quick 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. switching
  • Saving draft and publishing
  • Image side-loading
  • 3 modes
    • Direct access: quick post of sort, more to come with media and formatting tools
    • Modal: when accessed via new bookmarklet code: will show in an iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. within the visited page itself
    • Popup: if the currently visited page is SSLSSL Secure Socket Layer - Encryption from the server to the browser and back. Prevents prying eyes from seeing what you are sending between your browser and the server. but the target install is not, we open Press This in a popup instead. We also do that if the”legacy” bookmarklet code is used. It’s pretty awesome for pressing from your sweet smartphone.

Next Steps

  • Formatting and media upload tools (+editor)
  • De-selecting a picture (if none wanted)
  • Embeds
  • Add 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.
  • Add minimal WYSIWYG for tablet and larger
  • Add Add Media functionality
  • Add SVG icons 8)
  • Explore various installation flows

Ultra alpha installation instructions.

Help us make this thing amazing! Feedback and Pull Requests welcome!
Discussion: corepressthis.wordpress.comWordPress.com An online implementation of WordPress code that lets you immediately access a new WordPress environment to publish your content. WordPress.com is a private company owned by Automattic that hosts the largest multisite in the world. This is arguably the best place to start blogging if you have never touched WordPress before. https://wordpress.com/ | Chat: Skype | Weekly Meeting: Wed. 16:00 UTC in #wordpress-ui

#press-this