Skip to content

Commit

Permalink
Update the "patterns" to reflect "user interface" instead (#21562)
Browse files Browse the repository at this point in the history
* Update the "patterns" to reflect "user interface" instead

This file was confusing because it used terminology like "patterns" for specific UI sections. We are using the terminology "patterns" in relation to Block Patterns nowadays, so this needed updating. I also changed the Title of the doc, so this may need to be reflected elsewhere?

There were several text changes made to align with how the current interface behaves. 

I did not update images to reflect the new G2 design yet. That should come in another PR.

* Updated the docs to reflect the title change.
  • Loading branch information
mapk authored Apr 13, 2020
1 parent de08554 commit 6bcf16a
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# Patterns
# User Interface

## Basic Editor Interface
## The Block Editor

The block editor’s general layout uses on a bar at the top, with content below.
The block editor’s general layout uses a bar at the top, with content below.

![Editor Interface](https://cldup.com/VWA_jMcIRw-3000x3000.png)

The **Toolbar** contains document-level actions: Editor mode, save status, global actions for undo/redo/insert, the settings toggle, and publish options.
The **Toolbar** contains document-level actions: Editor/Select modes, save status, global actions for undo/redo/insert, the settings toggle, and publish options.

The **Content Area** contains the document itself.

The **Settings Sidebar** contains additional settings for the document (tags, categories, schedule etc.) and for blocks in the “Block” tab. A cog button in the toolbar hides the Settings Sidebar, allowing the user to enjoy a more immersive writing experience. On small screens, the sidebar is hidden by default.

## The Block Interface
## The Block

The block itself is the most basic unit of the editor. Generally speaking, everything is a block. Users build posts and pages using blocks, mimicking the vertical flow of the underlying HTML markup.

Expand All @@ -24,11 +24,11 @@ A selected block shows a number of contextual actions:

The block interface has basic actions. The block editor aims for good, common defaults, so users should be able to create a complete document without actually needing the advanced actions in the Settings Sidebar.

**The Block Toolbar** highlights commonly-used actions. The **Block Chip** lives in the block toolbar, and contains high-level controls for the selected block. It primarily allows users to transform a block into another type of compatible block. Some blocks also use the block chip to users to choose from a set of alternate block styles.
**The Block Toolbar** highlights commonly-used actions. The **Block Icon** lives in the block toolbar, and contains high-level controls for the selected block. It primarily allows users to transform a block into another type of compatible block. Some blocks also use the block icon for users to choose from a set of alternate block styles.

The **Block Formatting** options let users adjust block-level settings, and the **Inline Formatting** options allow adjustments to elements inside the block. When a block is long, the block toolbar pins itself to the top of the screen as the user scrolls down the page.

Blocks can be moved up and down via the **Block Mover** icons on the left. Additional block actions are available on the right via an ellipsis menu: deleting and duplicating blocks, as well as **advanced actions** like “Edit as HTML” and “Convert to Reusable Block.”
Blocks can be moved up and down via the **Block Mover** icons. Additional block actions are available via an ellipsis menu: deleting and duplicating blocks, as well as **advanced actions** like “Edit as HTML” and “Convert to Reusable Block.”

An unselected block does not show the block toolbar or any other contextual controls. In effect, an unselected block is a preview of the content itself:

Expand All @@ -47,7 +47,7 @@ The sidebar has two tabs, Document and Block:

Each tab has sets of editable fields (**Sidebar Sections**) that users can toggle open or closed.

If a block requires advanced configuration, those settings should live in the Settings sidebar (Editor block settings can also be reached directly by clicking the cog icon next to a block). Don’t put anything in the sidebar block tab that is necessary for the basic operation of your block; your user might dismiss the sidebar for an immersive writing experience. Pick good defaults, and make important actions available in the block toolbar.
If a block requires advanced configuration, those settings should live in the Settings Sidebar. Don’t put anything in the sidebar block tab that is necessary for the basic operation of your block; your user might dismiss the sidebar for an immersive writing experience. Pick good defaults, and make important actions available in the block toolbar.

Actions that could go in the block tab of the sidebar could be:

Expand All @@ -60,6 +60,4 @@ Actions that could go in the block tab of the sidebar could be:

![Block Library](https://cldup.com/7QoQIoLk-A-3000x3000.png)

The **Block Library** appears when someone inserts a block, whether via the toolbar, or contextually within the content area. Inside, blocks are organized into expandable sections. The block library’s search bar auto-filters the list of blocks as the user types. Users can choose a block by selecting the **Block Button** or the **Block Name**.

**Parent Blocks** (Blocks that contain children blocks) are represented by a layered block button.
The **Block Library** appears when someone inserts a block, whether via the toolbar, or contextually within the content area. Inside, blocks are organized into expandable sections. The block library’s search bar auto-filters the list of blocks as the user types. Users can choose a block by selecting the **Block Button** or the **Block Name**.
6 changes: 3 additions & 3 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -270,9 +270,9 @@
"parent": "designers"
},
{
"title": "Patterns",
"slug": "design-patterns",
"markdown_source": "../docs/designers-developers/designers/design-patterns.md",
"title": "User Interface",
"slug": "user-interface",
"markdown_source": "../docs/designers-developers/designers/user-interface.md",
"parent": "designers"
},
{
Expand Down
2 changes: 1 addition & 1 deletion docs/toc.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
] },
{ "docs/designers-developers/designers/README.md": [
{ "docs/designers-developers/designers/block-design.md": [] },
{ "docs/designers-developers/designers/design-patterns.md": [] },
{ "docs/designers-developers/designers/user-interface.md": [] },
{ "docs/designers-developers/designers/design-resources.md": [] },
{ "docs/designers-developers/designers/animation.md": [] }
] },
Expand Down

0 comments on commit 6bcf16a

Please sign in to comment.