Create content with newContentElementWizard #5

rfoucard · 2021-04-04T18:24:42Z

As an editor, I want to create a new content block in my page with newContentBlockWizard, to add new information.

I can easily see and use a newContentBlockWizard bar
I can easily add a new content with a drag and drop from the newContentBlockWizard bar
I can easily add a new content with a click and click with the newContentBlockWizard bar
I can easily add a new content with a click and click with the newContentBlockWizard Contextual menu
I access all the create new content actions with the keyboard only

The newContentBlockWizard bar

I can show/hide the newContentBlockWizard bar clicking on the new content bar button
If the newContentBlockWizard bar is collapsed, then only the content block icons are visible and only my favorite content blocks are listed
If the newContentBlockWizard bar is uncollapsed, then all the content blocks are listed with their icon, title and descriptions, they are grouped by categories like the actual wizard
If the newContentBlockWizard bar is uncollapsed, then I can filter the content list with a search input like the actual wizard

Drag and Drop with the newContentBlockWizard bar

I can drag a content block from the newContentBlockWizard to a position in the page module
If I drag the new content hover an existing content, then I see the "add new content" positions available with a "+" icon with a warning background color
If I drag the new content hover a "add new content" area, it change in a "V" icon with a success background color
After droping the new content in a "add new content" area, I can see the content block in the new position in the page module

Click and Click with the newContentBlockWizard bar

If I click on a content block in the newContentBlockWizard, then an "add this content" overlay-icon (+) appear over the content icon to show it is selected
On a content mouse hover, I see the "add new content" positions available (above and below) with a "+" icon with a warning background color
On a "add new content" area mouse hover, it change in a "V" icon in a green translucent background
After clicking on the "add new content" area, I can see the content block in the new position in the page module

The newContentBlockWizard Contextual menu

On a content mouse hover, I see the "add new content" positions available (above and below) with a "+" icon in an orange translucent background
On a "add new content" area mouse hover, it change in a "V" icon in a green translucent background
After clicking on the "add new content" area, the newContentBlockWizard Contextual menu appears above the mouse
In the newContentBlockWizard Contextual menu, I can filter the content list with a search input
In the newContentBlockWizard Contextual menu, if I click on a content block, then I can see the new content blocl in the new position in the page module

I access all the create new content actions with the keyboard only

I can use a skiplinks menu to access the "add new content bar", "page action buttons", "module action buttons", "page path information", and "page columns positions" areas
I can access the newContentBlockWizard bar, it's parts and subparts with the keyboard
If I select a content type in the newContentBlockWizard bar with the keyboard first, then the focus is on the page content columns area to directly select a column, then a content, then a target position, to add the new content
If I select first a column, then a content, then a target position, with the keyboard, then the newContentBlockWizard Contextual menu appears and the focus is on it
I can access the newContentBlockWizard Contextual menu, it's parts and subparts with the keyboard

I have editor's permissions
I have permission to create a content block
I have permission to create a content block at the desired location
Mandatory fields of new content block have default / dummie values for the initial creation state

This step is about page "new content wizard" only. The previous step "simplification page module" must be finished before. In this step, two new wizards are implemented : a side bar with drag and drop or click and click method (content first, position second), and a contextual menu with a click and click (position first, content second). The contextual menu alternative may be usefull for reducing the distance between the two clicks and also for a frontend editing alternative.
All the necessary mockups are here : https://drive.google.com/drive/folders/19fAVoE_WD3HFIg4pP4NzBB_cUNxVZbJ6