Goal:

To create a content page that utilizes pre-defined blocks with one to many layout options that can be mixed and matched on the page. We need to create a backend interface, which will determine the front-end look and feel.

Background and Strategic Fit:

Clients would like to build customized pages with dynamic block elements to their liking. Once this tool is built clients can have pages they are able to create and customize easily without needing to use booj support hours, giving the client more customization options.

Constraints:

• To start, this functionality will only be replacing the current CKeditor and therefore will only apply to content pages. Additional functionality will be outlined in a different doc at a later time.

Assumptions:

• A company must be on the newest version of the admin in order to be eligible for CMS Editor functionality.

Project Comps - https://booj.invisionapp.com/d/main#/projects/prototypes/20635394

◦ For example - you will land on the CMS editor with just a single custom html block - <https://www.screencast.com/t/eiM0vu15> 

• When clicking into the custom html block you will see your content within the wysiwyg on the right - See custom Filled Block Comp • Design has comped 2 different options for the wysiwyg editor - inline and popup - either option is fine - go with whatever is best from an implementation standpoint. • Please make sure the html wysiwyg has an option to switch to the source code similar to the ckeditor (i.e. https://www.screencast.com/t/46Ve8T2VHI ) | | 4. | Adding a block to page | As an admin user with permission to add a block to a page I want to be able to add a new block type to a page so that I can customize the content and layout for that page. | Given I logged into the admin as an agent And I navigate to Customize My Site And I click on a content page And I click ‘edit content page’ on the created CMS page And I click ‘Add Block’ And I select a block from the popup And I add content to the block When I click Save Then the block is added to the CMS page. | • ll changes will either need to be saved or discarded • Upon landing on main editor, if it is a new page - no blocks will exist. (See Page Without Blocks comp listed above) • At the very start of using blocks, if this is an existing content page that an agent has on their current rebrand, the content will appear in an html block. (basically just replacing the current Ckeditor but on the blocks platform). • Upon clicking ‘Add New Block’ there will be a popup with the blocks you can choose from. (See New Block Popup comp listed above). When you click on a block to add from the popup it will be added and you will be in the block editor of the newly added block (EX: https://booj.invisionapp.com/d/main#/console/20635394/434821599/preview). You will either need to save or discard your changes from here. | | 5. | Editing an existing block | As an admin user with permission to edit a block I want to be able to edit an existing block on a page so that I can easily update the content and layout for that page. | Given I am on the main CMS editor page When I hover over a block from the left navigation And I click the pencil edit icon And I edit the content for that block When I click Save Then my changes will be saved for that block. Given I am on the main CMS editor page When I click into a block on the right And click the pencil edit in the upper left corner of the block When I click Save Then my changes will be saved for that block. | Assumptions: • When editing, as you type in the input on the left the text updates on the preview page to the right • https://www.screencast.com/t/goUFwSbz2X does the same thing as https://www.screencast.com/t/eHfVxwBQq • You cannot inline edit. You must enter text in the inputs on the left nav to update components • We will have placeholder text/images etc. only for required fields. Required fields will be noted with an asterisk. • If you are editing a block from the edit screen and you click to a different block, if you have not saved your changes you will get a popup asking you to confirm • If you are editing a block from the edit screen, and save your changes and then click to a different block within this screen, that new blocks editor will appear on the left. NOTE: • Will need information per block on what fields are required | | 6. | Deleting an existing block | As an admin user with permission to delete a block I want to be able to delete an existing block on a page so that I can easily remove content that I no longer want for that page. | Given I am on the main CMS editor page When I hover over a block from the left navigation And I click the trash delete icon And I delete the block And a confirmation popup comes up When I click ‘confirm’ on the confirmation popup Then my block will be removed and my changes will be saved. Given I am on the main CMS editor page When I click into a block on the right And I click the trash delete icon on the right hand side And a confirmation popup comes up When I click ‘confirm’ on the confirmation popup Then my block will be removed and my changes will be saved. | Assumptions: • Deleting a block from the blocks list page can be done by https://www.screencast.com/t/B3Y2cFou or by https://www.screencast.com/t/4ixYDtRUCKt • When deleting a block you will always have a popup confirmation asking you if you are sure you want to delete the block | | 7. | Re-ordering existing blocks | As an admin user with permission to create blocks I want to be able to re-order existing blocks so that I can easily change the layout of components and the order in which they appear on my page. | Given I am on the main CMS editor page And I select a block from the side nav on the left And I hold down and drag up or down And I let go of the mouse Then my block will appear in the new position that I dragged it to and the page will have autosaved. | Assumptions: • There are 2 ways to reorder a block - https://www.screencast.com/t/eXWrjsoyH4gaor if you https://www.screencast.com/t/VKVWzhI9zD3. • If you are inside a block edit screen you can also use the up or down arrows when clicking into a block on the right to move a block up or down. • When hovering over a block on the left from the block list, the cursor should become the grab cursor https://www.screencast.com/t/eUVuxDt3u. | | 8. | Duplicating existing blocks | As an admin user with permission to duplicate a block I want to be able to duplicate an existing block so that I can easily create the same layout as a different block to save me time when editing a page. | Given I am on the main CMS editor page When I hover over a block from the left navigation And I click the duplicate icon And I duplicate the block Then the exact same block will be added below the block I duplicated and the changes will be auto-saved. Given I am on the main CMS editor page When I click into a block on the right And I click the duplicate icon on the right And I duplicate the block Then the exact same block will be added below the block I duplicated and the changes will be auto-saved. | Assumptions: • There are 2 ways to duplicate a block - https://www.screencast.com/t/WrLCDtBmwl or if youhttps://www.screencast.com/t/0sHeTYs2BP. • If you duplicate a block it will always appear immediately below the block you duplicated, whether you added it on the right within a block, or from the side navigation on the left. • If you duplicate a block it will appear with the exact same information as the block you duplicated (text, photos etc). • When you duplicate a block and it appears below the block you duplicated, the new block will have a focused state as seen here (https://www.screencast.com/t/zhFXoGIx) - The new block will have ‘copy’ at the end of the name. If you duplicate that same initial block you can add ‘copy 2’, ‘copy 3’ etc. | | 9. | Renaming existing blocks | As an admin user with permission to rename a block I want to be able to rename an existing block so that I can easily differentiate between blocks with the same layout on my page. | Given I am on the main CMS editor page When I click on the name of a block from the navigation on the left and the name becomes an input And I update the name of the block When I click Save Then my block changes will be saved. Given I am on a block editor page And I click into the settings for that block And I update the name of the block And I save the block Then my block name will be saved. | Assumptions: • When I click the name of a block from the main CMS editor page navigation on the left it will https://www.screencast.com/t/cpTHXWwb that allows me to update the name of it. • If I click into the settings for a particular block, https://www.screencast.com/t/Pr31VnHfwD and I will have the ability to update that and save the block to change the name. | | 10. | Full preview of page on desktop | As an admin user with a website I want to be able to view a full preview of my page so that I can see what it will look like on my site before I save. | Given I am on the main CMS editor page Or on the block editor page When I click on ‘Full Preview’ in the top right of the screen I will be able to see a preview of what my page will look like on desktop on my site. | • When clicking ‘https://www.screencast.com/t/PESiy1kObS’ I will be brought to a screen that shows my entire page and what it will look like | | 11. | Mobile preview of page | As an admin user with a website I want to be able to view a mobile preview of my page so that I can see what it will look like on a mobile device before I save. | Given I am on the main CMS editor page Or on the block editor page When I click on ‘Mobile Preview’ in the top right of the screen I will be able to see a preview of what my page will look like on mobile on my site. | • When clicking ‘https://www.screencast.com/t/YmaYxCsRA3r’ I will be brought to a screen that shows my entire page and what it will look like on a mobile device | | 12. | Settings for block level | As an admin user with a website I want to be able to adjust settings for a particular block so that I can change how the block is displayed on my website. | Given I am on a block editor page When I click on the ‘Settings’ tab on the right I will be able to view and change several elements regarding the layout of the block so I can customize it to my liking. Given I am on a block editor page And I click ‘Settings’ And I make changes to the layout of the block When I save the block Then my settings changes will be saved. | Assumptions: • When I https://www.screencast.com/t/5NKdY1FhQmM for a particular block, the settings for that block will be populated below. • When I make a change to the settings on the left, I will see the update of what it will look like in the preview on the right. | | 13. | Reordering sections within a block | As an admin user with a website I want to be able to reorder individual sections within a block so that I can easily change the look and layout of that block within my page. | Given I am in the content section of a block And the block has more than 1 section And I click and hold a section And drag it above or below another section And release the section block When I save the block Then my section will now appear in the new position that I dragged it to | Assumptions: • If a block has more than 1 section - when hovering over a block section on the left while within a block, the cursor should become the grab cursor https://www.screencast.com/t/eUVuxDt3u. • Once a section is re-ordered, you will have to save or discard your changes (refer to comp above) • When you move a section above or below another section, that will be reflected in the preview to the right (refer to comp above) | | 14. | Expanding and closing a section within a block | As an admin user with a website I want to be able to expand and close a section within a block as I am editing so I can more easily view and focus on the section I am currently editing. | Given I am on a block editor page And I click the minus :minus: button in the upper left of a block Then my block will close so that you can only see the block section and not the details of that block. Given I am on a block editor page And I click the plus :plus: button in the upper left of a block Then my block will open so that I can see both the section and the details of that block. | Assumptions: • https://www.screencast.com/t/WnJ7RXieVN :minus: closes a block • https://www.screencast.com/t/P56F5pPq3x :plus: expands a block | | 15. | Ckeditor in CMS block editor | As an admin user with a website I want to be able to add a ckeditor type block so that I can replicate pages I had on my old site without having to recreate them with other types of blocks, or so that I can add new pages in a way I am already familiar with using the new editor. | Given I am on a block editor page And I click Add New Block And I click the Custom HTML Block from the Popup And I save my changes Then I will have a Custom HTML block that I can add content to for a given page. | Assumptions: • As mentioned in a previous user story, this Custom HTML block will be the default state for any previously created content pages (prior to when the block editor was built). • This will act very similarly to the CKeditor in the current booj admin. • There should be a source mode that allows the user to view the html source in the editor, similar to the Ckeditor in the current booj admin. • Developer can make best judgement as to which editor to use - inline vs. popup | | 16. | Creating Image + Text block | As an admin user with a website I want to be able to add a block with an image and text so that I can create a custom block with the information and image that I desire. | Given I am on a block editor page And I click Add New Block And I click the Image + Text Block from the Popup And I save my changes Then I will have an Image + Text block that I can add content to for a given page. | Assumptions: • Within the settings for an Image + Text block you should be able to select/edit the following: ◦ Block Name ◦ # of images (1, 2 or 3) ◦ Image Position (Left, Right or Top) ◦ Call to Action Style (Button or Link) ◦ Unboxed vs. Boxed Style | | 17. | Creating Image Gallery block | As an admin user with a website I want to be able to add an image gallery block so that I can display many images of my choosing within a given section. | Given I am on a block editor page And I click Add New Block And I click the Image Gallery Block from the Popup And I save my changes Then I will have an Image + Text block that I can add content to for a given page. | Assumptions: • Within the settings for an Image Gallery block you should be able to select/edit the following: ◦ Block Name ◦ Gallery Type (Large Filmstrip, Small Filmstrip, Content-Width and Full-Bleed) ◦ Loop Slideshow (On or Off) ◦ Arrows Style (Light or Dark) • From within the content section of the Image Gallery block, while hovering over an image you can re-order an image by using the up and down arrows, delete an image by clicking the trash icon, or replace an image by clicking on the image itself. (See Image Gallery Content Hover above) | | 18. | Creating Agent Bio block | As an agent with a website I want to be able to add an agent bio block so that I can easily display bio and contact information about myself on my website. | Given I am on a block editor page And I click Add New Block And I click the Agent Bio Block from the Popup And I save my changes Then I will have an Image + Text block that I can add content to for a given page. | ADVISING WE PUT THIS ON HOLD AS THIS IS NOT STANDARD FUNCTIONALITY FOR A CONTENT PAGE AS OF NOW. THIS WOULD NEED TO BE DONE USING A RICH CONTENT PAGE TO START - FOR NOW WE ARE JUST STARTING WITH ESSENTIALLY REPLACING CKEDITOR FUNCTIONALITY. PLACEHOLDER TICKET HAS BEEN CREATED. |

If you have any questions feel free to contact me at [email protected].