DOCS Update userhelp content and images

silverstripe · Jun 15, 2018 · 2d86b16 · 2d86b16
1 parent 24df629
commit 2d86b16
Show file tree

Hide file tree

Showing 16 changed files with 62 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ of rather than a single text field. Features supported:
 The module provides basic markup for each of the elements but you will likely need to provide your own styles. Replace
 the `$Content` variable with `$ElementalArea` in your page templates, and rely on the markup of the individual elements.
 
-For a more detailed overview of using this module, please see [the user help documentation](docs/en/index.md).
+For a more detailed overview of using this module, please see [the User help guides](docs/en/index.md).
 
 ## Requirements
 
@@ -33,7 +33,7 @@ composer require dnadesign/silverstripe-elemental 2.x-dev
 ```
 
 The following YAML config will enable elements on every `Page` object,
-replacing the standard `Content` rich text field. 
+replacing the standard `Content` rich text field.
 
 **mysite/\_config/elements.yml**
 
@@ -47,13 +47,20 @@ In your page type layout template use `$ElementalArea` to render the elements to
 
 ## Getting more elements
 
-Note that this module only comes by default with the base element and a "Content" element. If you need more, take
+Note that this module comes by default with the base element and a "Content" element. If you need more, take
 a look at some other modules:
 
+## SilverStripe supported content block modules
+
+To learn more about [SilverStripe supported](https://www.silverstripe.org/software/addons/supported-modules-definition/) content block types see, [Creating new blocks](/docs/en/edit_content.md).
+
 * [dnadesign/silverstripe-elemental](https://github.com/dnadesign/silverstripe-elemental): Text content (built-in)
-* [silverstripe/silverstripe-elemental-blocks](https://github.com/silverstripe/silverstripe-elemental-blocks): File and image block
-* [silverstripe/silverstripe-elemental-blocks](https://github.com/silverstripe/silverstripe-elemental-blocks): Banner with call-to-action and content
+* [silverstripe/silverstripe-elemental-fileblock](https://github.com/silverstripe/silverstripe-elemental-fileblock): File and image block
+* [silverstripe/silverstripe-elemental-bannerblock](https://github.com/silverstripe/silverstripe-elemental-bannerblock): Banner with call-to-action and content
 * [dnadesign/silverstripe-elemental-userforms](https://github.com/dnadesign/silverstripe-elemental-userforms): Embed a [user defined form](https://github.com/silverstripe/silverstripe-userforms)
+
+## Examples of community built content block modules (not a comprehensive list)
+
 * [dnadesign/silverstripe-elemental-list](https://github.com/dnadesign/silverstripe-elemental-list): Container for elements (allows layouts)
 * [dnadesign/silverstripe-elemental-virtual](https://github.com/dnadesign/silverstripe-elemental-virtual): Reuse elements across pages
 * [dynamic/silverstripe-elemental-customer-service](https://github.com/dynamic/silverstripe-elemental-customer-service): Contact information
@@ -73,8 +80,6 @@ more compatible with other approaches in SilverStripe:
 * [dnadesign/silverstripe-elemental-subsites](https://github.com/dnadesign/silverstripe-elemental-subsites): Compatibility with the [silverstripe/subsites](https://github.com/silverstripe/silverstripe-subsites) module
 * [dnadesign/silverstripe-elemental-skeletons](https://github.com/dnadesign/silverstripe-elemental-skeletons): Creates a template of elements which can be created for a page in the CMS
 
-
-
 ## Configuration
 
 ### Limit to specific page type
@@ -198,7 +203,7 @@ DNADesign\Elemental\Models\ElementContent:
 ### Disabling the default stylesheets
 
 When installing this module, there may be a default set of CSS stylesheets that come to provide some examples for the
-various default element types for the frontend website.
+various default element types for the front-end website.
 
 You can disable this with YAML configuration:
 
@@ -243,12 +248,11 @@ yarn build
 
 You'll need to have [yarn installed](https://yarnpkg.com/en/docs/install) globally in your command line.
 
-**Note:** If adding or modifying colours, spacing, font sizes etc. please try and use an appropriate variable from the
-silverstripe/admin module if available.
+**Note:** If adding or modifying colours, spacing, font sizes etc. please try and use an appropriate variable from the silverstripe/admin module if available.
 
 ## Screenshots
 
-![Overview](docs/images/overview.png)
+![Elemental content block overview](docs/images/content-block-overview.png)
 
 ## Versioning
 

diff --git a/docs/en/edit_content.md b/docs/en/edit_content.md
@@ -1,33 +1,45 @@
 # Creating and editing content
 
-To get started, create a new page in the CMS. For more information on this, see the "Creating pages and content"
-section of the [user help documentation](https://userhelp.silverstripe.org).
+To get started, create a new page in the CMS. For more information, see [Pages and content](https://userhelp.silverstripe.org) User help guide, to learn more.
 
 ## Creating new blocks
 
-Normally in the CMS a page has a Content field which allows you to enter content directly. You will notice now that
-the Content field has been replaced with a list of content blocks. This list will be empty until you have added
-some blocks, so let's do this now.
+Normally in the CMS a page has an HTML editor which allows you to enter content directly.
+You will notice that the HTML editor has been replaced with an empty list and a content block ***Select type to create*** dropdown field.
 
-To get started, choose the type of block you want to create from the "Select type to create" dropdown field, and click
-"Add":
+The block types shown in the dropdown field will depend on your set up. By default the [Elemental module](https://github.com/dnadesign/silverstripe-elemental) only comes with the content block type, **Content**.
+
+We’ve created the most functional and effective elements of content block modules that have been developed by the SilverStripe community and created four generic SilverStripe supported content block types:
+
+* [Content:](https://github.com/dnadesign/silverstripe-elemental) text content (built-in).
+* [Banner:](https://github.com/silverstripe/silverstripe-elemental-bannerblock) banner with call-to-action and content.
+* [File:](https://github.com/silverstripe/silverstripe-elemental-fileblock) file and image block.
+* [Form:](https://github.com/dnadesign/silverstripe-elemental-userforms) integrates [silverstripe-userforms](silverstripe/silverstripe-userforms) and provides a new content block, which can be used to create user defined forms.
+
+For examples of community content blocks see,
+[Getting more elements](https://github.com/dnadesign/silverstripe-elemental#getting-more-elements).
+
+To get started, choose the type of block you want to create from the ***Select type to create*** dropdown field, and click the button ***Add***.
 
 ![Choose a block to create](../images/creating_a_content_block.png)
 
-From here you will be taken to edit the content for the new block. If you've used the SilverStripe CMS in the past, you
-will be familiar with the Content editor you are shown. Enter your content as required, provide a title for the block
-and choose whether you want the title to be shown on the frontend or not via the "Displayed" checkbox.
+From here you will be navigated away to edit the content for the new block. Enter your content as required, provide a title for the block and choose whether you want the title to be shown on the front-end or not via the ***Displayed*** checkbox field.
 
-When you are finished, click "Save" to save the content and you will be safe to return back to your new page.
+When you are finished, click the button ***Save***.
 
 ![Editing content for a block](../images/editing_content.png)
 
 ## Editing existing blocks
 
-Editing an existing block is the same process as creating a new one, only you click on the block you want to edit
-instead of choosing a type and selecting "Add" to create a new one.
+When viewing a page, you can select the content block list item or select **Content** from the ***More actions*** dropdown shown as an ellipses icon.
+
+![Editing a block via More actions](../images/edit_via_more_actions.png)
+
+# Reordering content blocks
+
+To change the order of content blocks in a page, simply click and hold on the drag handle icon on the left hand side of a block list item, then drag and release to reorder the item.
 
-When viewing a page, aside from clicking on a content block that you want to edit, you can also select "Content" from
-the "more actions" dropdown list at the right hand side:
+![Reordering content blocks](../images/reordering_blocks.png)
 
-![Editing a block via "more actions"](../images/edit_via_more_actions.png)
+When you release your mouse the blocks will automatically save their new positions, however you may need to publish
+the page to see the new order in the front-end of your website.
diff --git a/docs/en/history.md b/docs/en/history.md
@@ -3,25 +3,18 @@
 ## Finding historic versions of content
 
 Whenever you modify a block and save it, a new version of the block is created and the old version is saved in a
-history archive. You can view this archive from the "History" tab of any block, which will show you a list of each
-version, the date it was modified or published and the user who actioned the change.
+history archive. You can view the archived item by navigating to the **History** tab of any block, which will show you a list of each version, the date it was modified or published and the user who actioned the change.
 
 ![Viewing the history of a block](../images/viewing_block_history.png)
 
-You can click on a specific version from the list to see a reference of what that block looked like at that version:
+You can select a specific version to see a reference of what the content block looked like at that version.
 
 ![A version in history](../images/block_version.png)
 
 ## Rolling back to specific versions
 
-If you want to revert a content block back to an old version, simply choose the version you want from the list and
-click on the "Revert to this version" button at the bottom:
+If you want to revert a content block back to an old version, simply choose the version you want from the list and click the button ***Revert to this version***.
 
 ![Revert button](../images/revert_button.png)
 
-You will then see a success message:
-
-![Success message](../images/revert_success_message.png)
-
-Doing this will create a new draft version of the block with the old content in it. You will need to publish the
-new content for it to be visible on the frontend website.
+This will create a new draft version of the content block with the old content present. You will need to publish the content block in order to be visible on the front-end website.
diff --git a/docs/en/index.md b/docs/en/index.md
@@ -1,3 +1,6 @@
+title: Content blocks
+summary: Creating content blocks in the CMS.
+
 # Using content blocks in the CMS
 
 The [Elemental module](https://addons.silverstripe.org/add-ons/dnadesign/silverstripe-elemental) provides the ability
@@ -9,12 +12,12 @@ developers over how certain pieces of content are presented.
 
 Make sure that your SilverStripe CMS installation has the [Elemental module](https://addons.silverstripe.org/add-ons/dnadesign/silverstripe-elemental)
 installed, and optionally the [SilverStripe Blocks addon module](https://addons.silverstripe.org/add-ons/silverstripe/elemental-blocks).
+https://github.com/dnadesign/silverstripe-elemental/#getting-more-elements
 
-We also assume that you have had a developer enable the functionality with configuration before you start.
+<div class="note" markdown="1">Developer knowledge is required to enable the functionality within the configuration before you begin.</div>
 
 ## Features
 
-* [Create and editing content blocks](edit_content.md)
-* [Reordering content blocks](reordering_content.md)
-* [Use history and rollback to certain versions](history.md)
-* [Use the reports](reports.md)
+* [Create and editing Content blocks](edit_content.md)
+* [History and rollback to certain versions](history.md)
+* [Reports](reports.md)
diff --git a/docs/en/reordering_content.md b/docs/en/reordering_content.md
diff --git a/docs/en/reports.md b/docs/en/reports.md
@@ -1,30 +1,28 @@
 # Use the reports
 
-The [Elemental module](https://addons.silverstripe.org/add-ons/dnadesign/silverstripe-elemental) adds some new
-reports to the "Reports" section of the CMS. These will allow you to identify and find content in blocks quickly.
+The [Elemental module](https://addons.silverstripe.org/add-ons/dnadesign/silverstripe-elemental) will add new
+reports to the **Reports** section of the CMS. These will allow you to identify and find content within blocks quickly.
 
 ## Content block types
 
 This report will list all types of content blocks in your system, as well as how many times they have been
 used to create content.
 
-You can find this by navigating to "Reports" and choosing "Content block types" from the list:
+Navigating to the **Reports** section in the CMS menu and select the report ***Content block types***.
 
 ![Content block types report](../images/report_types.png)
 
-You can click on a content block type to go to the "content blocks in use" report, filtered by this type of block.
+You can select a content block type to view the ***Content blocks in use*** report, filtered by this type of block.
 
 ## Content blocks in use
 
 Here you will be shown a more detailed overview of the content blocks in your system, which type they are and
 which page they were created on.
 
-![Content blocks in use report](../images/report_in_use.png)
+Select any block title, or page name to enter Edit mode.
 
-Click on any block title, or page name to go to edit the block.
+![Content blocks in use report](../images/report_in_use.png)
 
 ## Printing and exporting
 
-For any SilverStripe report you can select either "Print" or "Export to CSV" to save or export your report data:
-
-![Print or export to CSV](../images/print_or_export.png)
+To print or export your report data click the buttons ***Print*** or ***Export to CSV***.
diff --git a/docs/images/block_version.png b/docs/images/block_version.png
diff --git a/docs/images/content-block-overview.png b/docs/images/content-block-overview.png
diff --git a/docs/images/creating_a_content_block.png b/docs/images/creating_a_content_block.png
diff --git a/docs/images/editing_content.png b/docs/images/editing_content.png
diff --git a/docs/images/overview.png b/docs/images/overview.png
diff --git a/docs/images/print_or_export.png b/docs/images/print_or_export.png
diff --git a/docs/images/reordering_blocks.png b/docs/images/reordering_blocks.png
diff --git a/docs/images/revert_button.png b/docs/images/revert_button.png
diff --git a/docs/images/revert_success_message.png b/docs/images/revert_success_message.png
diff --git a/docs/images/viewing_block_history.png b/docs/images/viewing_block_history.png