From 6bcf16ae29369f8bf2d6b4916524764d6abd2e7b Mon Sep 17 00:00:00 2001 From: Mark Uraine Date: Mon, 13 Apr 2020 13:35:27 -0700 Subject: [PATCH] Update the "patterns" to reflect "user interface" instead (#21562) * 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. --- .../{design-patterns.md => user-interface.md} | 20 +++++++++---------- docs/manifest.json | 6 +++--- docs/toc.json | 2 +- 3 files changed, 13 insertions(+), 15 deletions(-) rename docs/designers-developers/designers/{design-patterns.md => user-interface.md} (72%) diff --git a/docs/designers-developers/designers/design-patterns.md b/docs/designers-developers/designers/user-interface.md similarity index 72% rename from docs/designers-developers/designers/design-patterns.md rename to docs/designers-developers/designers/user-interface.md index bf06df6da5e9df..1d688e27838d64 100644 --- a/docs/designers-developers/designers/design-patterns.md +++ b/docs/designers-developers/designers/user-interface.md @@ -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. @@ -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: @@ -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: @@ -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**. diff --git a/docs/manifest.json b/docs/manifest.json index 537f6ea671988d..b6a15e4b2cf316 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -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" }, { diff --git a/docs/toc.json b/docs/toc.json index 2e5d2af87e422a..2db10019b76e6b 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -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": [] } ] },