diff --git a/docs/contributors/design/reference.md b/docs/contributors/design/reference.md index a706b904b6085..13cec883926a3 100644 --- a/docs/contributors/design/reference.md +++ b/docs/contributors/design/reference.md @@ -15,4 +15,4 @@ Released under GPL license, made by [Cristel Rossignol](https://twitter.com/cris ## Mockups -Mockup Sketch files are available in [the Design section](/docs/how-to-guides/designers/design-resources.md). +Mockup Sketch files are available in [the User Interface section](/docs/explanations/user-interface/design-resources.md). diff --git a/docs/how-to-guides/designers/user-interface.md b/docs/explanations/user-interface/README.md similarity index 100% rename from docs/how-to-guides/designers/user-interface.md rename to docs/explanations/user-interface/README.md diff --git a/docs/how-to-guides/designers/animation.md b/docs/explanations/user-interface/animation.md similarity index 100% rename from docs/how-to-guides/designers/animation.md rename to docs/explanations/user-interface/animation.md diff --git a/docs/how-to-guides/designers/block-design.md b/docs/explanations/user-interface/block-design.md similarity index 90% rename from docs/how-to-guides/designers/block-design.md rename to docs/explanations/user-interface/block-design.md index ef733a08eb470..5df99b5398867 100644 --- a/docs/how-to-guides/designers/block-design.md +++ b/docs/explanations/user-interface/block-design.md @@ -76,11 +76,11 @@ When referring to a block in documentation or UI, use title case for the block t Blocks should have an identifying icon, ideally using a single color. Try to avoid using the same icon used by an existing block. The core block icons are based on [Material Design Icons](https://material.io/tools/icons/). Look to that icon set, or to [Dashicons](https://developer.wordpress.org/resource/dashicons/) for style inspiration. -![A screenshot of the block library with concise block names](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/blocks-do.png) +![A screenshot of the block library with concise block names](https://developer.wordpress.org/files/2022/01/blocks-do.png) **Do:** Use concise block names. -![A screenshot of the block library with long, multi-line block names](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/blocks-dont.png) +![A screenshot of the block library with long, multi-line block names](https://developer.wordpress.org/files/2022/01/blocks-dont.png) **Don't:** Avoid long, multi-line block names. @@ -96,11 +96,11 @@ Stick to a single imperative sentence with an action + subject format. Examples: - Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content. - Create a bulleted or numbered list. -![A screenshot of a short block description](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/block-descriptions-do.png) +![A screenshot of a short block description](https://developer.wordpress.org/files/2022/01/block-descriptions-do.png) **Do:** Use a short, simple block description. -![A screenshot of a long block description that includes branding](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/block-descriptions-dont.png) +![A screenshot of a long block description that includes branding](https://developer.wordpress.org/files/2022/01/block-descriptions-dont.png) **Don't:** Avoid long descriptions and branding. @@ -108,11 +108,11 @@ Avoid long descriptions and branding. If your block requires a user to configure some options before you can display it, you should provide an instructive placeholder state. -![A screenshot of the Gallery block's placeholder](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/placeholder-do.png) +![A screenshot of the Gallery block's placeholder](https://developer.wordpress.org/files/2022/01/placeholder-do.png) **Do:** Provide an instructive placeholder state. -![An example Gallery block placeholder but with intense, distracting colors and no instructions](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/placeholder-dont.png) +![An example Gallery block placeholder but with intense, distracting colors and no instructions](https://developer.wordpress.org/files/2022/01/placeholder-dont.png) **Don't:** Avoid branding and relying on the title alone to convey instructions. @@ -122,11 +122,11 @@ When unselected, your block should preview its content as closely to the front-e When selected, your block may surface additional options like input fields or buttons to configure the block directly, especially when they are necessary for basic operation. -![A Google Maps block with inline, always-accessible controls required for the block to function](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/block-controls-do.png) +![A Google Maps block with inline, always-accessible controls required for the block to function](https://developer.wordpress.org/files/2022/01/block-controls-do.png) **Do:** For controls that are essential for the operation of the block, provide them directly inside the block edit view. -![A Google Maps block with essential controls moved to the sidebar where they can be contextually hidden](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/block-controls-dont.png) +![A Google Maps block with essential controls moved to the sidebar where they can be contextually hidden](https://developer.wordpress.org/files/2022/01/block-controls-dont.png) **Don't:** Do not put controls that are essential to the block in the sidebar, otherwise the block will appear non-functional to mobile users or desktop users who have dismissed the sidebar. @@ -134,7 +134,7 @@ Do not put controls that are essential to the block in the sidebar, otherwise th The “Block” tab of the Settings Sidebar can contain additional block options and configuration. Keep in mind that a user can dismiss the sidebar and never use it. You should not put critical options in the Sidebar. -![A screenshot of the Paragraph block's advanced settings in the sidebar](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/how-to-guides/designers/assets/advanced-settings-do.png) +![A screenshot of the Paragraph block's advanced settings in the sidebar](https://developer.wordpress.org/files/2022/01/advanced-settings-do.png) **Do:** Because the Drop Cap feature is not necessary for the basic operation of the block, you can put it to the Block tab as optional configuration. diff --git a/docs/how-to-guides/designers/design-resources.md b/docs/explanations/user-interface/design-resources.md similarity index 100% rename from docs/how-to-guides/designers/design-resources.md rename to docs/explanations/user-interface/design-resources.md diff --git a/docs/how-to-guides/designers/README.md b/docs/how-to-guides/designers/README.md deleted file mode 100644 index a630847b37661..0000000000000 --- a/docs/how-to-guides/designers/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Designer Documentation - -For those designing blocks and other block editor integrations, this documentation will provide resources for creating beautiful and intuitive layouts. diff --git a/docs/how-to-guides/designers/assets/advanced-settings-do.png b/docs/how-to-guides/designers/assets/advanced-settings-do.png deleted file mode 100644 index c589ace4c1348..0000000000000 Binary files a/docs/how-to-guides/designers/assets/advanced-settings-do.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/block-controls-do.png b/docs/how-to-guides/designers/assets/block-controls-do.png deleted file mode 100644 index 86f2019638fe0..0000000000000 Binary files a/docs/how-to-guides/designers/assets/block-controls-do.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/block-controls-dont.png b/docs/how-to-guides/designers/assets/block-controls-dont.png deleted file mode 100644 index 301a521154641..0000000000000 Binary files a/docs/how-to-guides/designers/assets/block-controls-dont.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/block-descriptions-do.png b/docs/how-to-guides/designers/assets/block-descriptions-do.png deleted file mode 100644 index 53d6a443c7890..0000000000000 Binary files a/docs/how-to-guides/designers/assets/block-descriptions-do.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/block-descriptions-dont.png b/docs/how-to-guides/designers/assets/block-descriptions-dont.png deleted file mode 100644 index 9225cb5d8575a..0000000000000 Binary files a/docs/how-to-guides/designers/assets/block-descriptions-dont.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/blocks-do.png b/docs/how-to-guides/designers/assets/blocks-do.png deleted file mode 100644 index bd79797dfea12..0000000000000 Binary files a/docs/how-to-guides/designers/assets/blocks-do.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/blocks-dont.png b/docs/how-to-guides/designers/assets/blocks-dont.png deleted file mode 100644 index 2c69f1ada0921..0000000000000 Binary files a/docs/how-to-guides/designers/assets/blocks-dont.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/placeholder-do.png b/docs/how-to-guides/designers/assets/placeholder-do.png deleted file mode 100644 index dc5f1327d429a..0000000000000 Binary files a/docs/how-to-guides/designers/assets/placeholder-do.png and /dev/null differ diff --git a/docs/how-to-guides/designers/assets/placeholder-dont.png b/docs/how-to-guides/designers/assets/placeholder-dont.png deleted file mode 100644 index 4f313ccee5ac1..0000000000000 Binary files a/docs/how-to-guides/designers/assets/placeholder-dont.png and /dev/null differ diff --git a/docs/manifest.json b/docs/manifest.json index 358cdea9b4fef..b08540826850c 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -167,36 +167,6 @@ "markdown_source": "../docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md", "parent": "block-tutorial" }, - { - "title": "Designer Documentation", - "slug": "designers", - "markdown_source": "../docs/how-to-guides/designers/README.md", - "parent": "how-to-guides" - }, - { - "title": "Block Design", - "slug": "block-design", - "markdown_source": "../docs/how-to-guides/designers/block-design.md", - "parent": "designers" - }, - { - "title": "User Interface", - "slug": "user-interface", - "markdown_source": "../docs/how-to-guides/designers/user-interface.md", - "parent": "designers" - }, - { - "title": "Resources", - "slug": "design-resources", - "markdown_source": "../docs/how-to-guides/designers/design-resources.md", - "parent": "designers" - }, - { - "title": "Animation", - "slug": "animation", - "markdown_source": "../docs/how-to-guides/designers/animation.md", - "parent": "designers" - }, { "title": "Development Platform", "slug": "platform", @@ -1925,6 +1895,30 @@ "markdown_source": "../docs/explanations/architecture/styles.md", "parent": "architecture" }, + { + "title": "User Interface", + "slug": "user-interface", + "markdown_source": "../docs/explanations/user-interface/README.md", + "parent": "explanations" + }, + { + "title": "Block Design", + "slug": "block-design", + "markdown_source": "../docs/explanations/user-interface/block-design.md", + "parent": "user-interface" + }, + { + "title": "Animation", + "slug": "animation", + "markdown_source": "../docs/explanations/user-interface/animation.md", + "parent": "user-interface" + }, + { + "title": "Resources", + "slug": "design-resources", + "markdown_source": "../docs/explanations/user-interface/design-resources.md", + "parent": "user-interface" + }, { "title": "Frequently Asked Questions", "slug": "faq", diff --git a/docs/toc.json b/docs/toc.json index b2fcc1a965c4e..7fdcd33d0aba1 100644 --- a/docs/toc.json +++ b/docs/toc.json @@ -82,14 +82,6 @@ } ] }, - { - "docs/how-to-guides/designers/README.md": [ - { "docs/how-to-guides/designers/block-design.md": [] }, - { "docs/how-to-guides/designers/user-interface.md": [] }, - { "docs/how-to-guides/designers/design-resources.md": [] }, - { "docs/how-to-guides/designers/animation.md": [] } - ] - }, { "docs/how-to-guides/platform/README.md": [ { @@ -278,6 +270,13 @@ { "docs/explanations/architecture/styles.md": [] } ] }, + { + "docs/explanations/user-interface/README.md": [ + { "docs/explanations/user-interface/block-design.md": [] }, + { "docs/explanations/user-interface/animation.md": [] }, + { "docs/explanations/user-interface/design-resources.md": [] } + ] + }, { "docs/explanations/faq.md": [] }, { "docs/explanations/glossary.md": [] }, { "docs/explanations/history.md": [] }