Elemental 4.6 broken on pages with multiple ElementalAreas

[t3hn0]

We're using multiple ElemetalAreas on pages. Everything worked fine until we upgraded SS to 4.8 and Elemental to 4.6 (we were using SS 4.6 and Elemental 4.4 before).
Problem occurs when multiple Elemental Areas on single page contain at least one Elemental and you try to use "insert here" link (blue-lined plus) and you try to add new block to the top of the list.

Video:

Test case:

1. install
   composer create-project silverstripe/installer ./ss4.elementals

2. add elemental
   composer require dnadesign/silverstripe-elemental 4.6

3. add extension app/_config/elemental.yml:

Page: 
  extensions: 
    - DNADesign\Elemental\Extensions\ElementalAreasExtension

4. edit app/src/Page.php:

<?php

namespace {

    use DNADesign\Elemental\Models\ElementalArea;
    use SilverStripe\CMS\Model\SiteTree;

    class Page extends SiteTree
    {
            
        private static $has_one = [
            'BlocksMain'         => ElementalArea::class,
            'BlocksRight'        => ElementalArea::class,
            'BlocksFooter'       => ElementalArea::class,
        ];
        
    }
}

5. build database
   /dev/build?flush

6. login to CMS and open/create new page

7. add new content block to first elemental area and then add new content block to second elemental area

8. try to add new block to first elemental area by using "insert here" option and add it to first place. You can see both "insert here" links are activated from first and second elemental areas and two popups are open. Selecting Element type would (in most cases) create new element in second elemental area although you were trying to add one to the first block.

Acceptance criteria

• When you use the hover bar to add a block, it adds it to the right tot he right Elemental Area, even when there's many areas on the same page.
• The position of the new block matches where you've clicked in the Elemental Area.

Pull request

FIX Hoverbar ID made uniq - #969

Travis broken build

https://app.travis-ci.com/github/silverstripe/silverstripe-elemental/jobs/566559693

[t3hn0]

Since green "Add block" button inserts new block to the top of the list we decided to temporarily hide first blue insert here link with css until this is fixed:

#AddBlockHoverBar_0 
{
	display: none !important;
}

[sabina-talipova]

1. Easiest way: Completely remove top "AddBlockHoverBar", since "Add block" button has the same functionality and adds the block at the beginning of Elemental area.
2. Since the reason of this problem, that the top "AddBlockHoverBar" has the same id "AddBlockHoverBar_0" as other top hover bars (not that which adds block below other block). This issue happens only if there are more than one elemental area on a page.
   There are two solutions:
   Add prefix with Elemental area ID to make AddBlockHoverBar's ID uniq. And then:
   2.1. Easiest way (bad way): Since we pass this ID in request, we should remove prefix in method before process it further. Could be potential problem when the passed ID doesn't follow pattern in the method.
   2.2. More complex: Add new property for HoverBarComponent with uniq ID for Id attribute only. Figure out where we use this attribute id and how process it in other Components.

[maxime-rainville]

Good investigation.

The HoverBar got added because having to add a block and move it around to its intended position was an annoyance to content authors. I don't think removing the Hover bar is an viable option.

If I'm understanding you correctly, the problem is that

• there's a HoverBar that is force added to the top of the elemental list and that hover bar has an ID of zero because it's not tied to any specific block.
• When you have multiple areas on a page you end up with mulitple hover bars with the same ID which causes our problem.

If you we just update the ID of those hover bar to be unique that should fix the problem. Since we area already have an areaId prop (which presumably is specific to each elemental area) passed to our HoverBar component, could we just add that to our IDs to make them unique ... which would be kind of similar to solution 2.2.

silverstripe-elemental/client/src/components/ElementEditor/HoverBar.js

Lines 14 to 50 in 3fe3c41

	function StatelessHoverBar({
	AddElementPopoverComponent,
	elementTypes,
	elementId,
	areaId,
	popoverOpen,
	onToggle }) {
	const lineClasses = `${classNames('-line')} font-icon-plus-circled`;
	const label = i18n._t('ElementAddNewButton.ADD_BLOCK', 'Add block');
	const btnProps = {
	className: classNames('-area', { '-area--focus': popoverOpen }),
	onClick: onToggle,
	'aria-label': label,
	title: label,
	id: `AddBlockHoverBarArea_${elementId}`
	};
	return (
	<div className={classNames('')} id={`AddBlockHoverBar_${elementId}`}>
	<button {...btnProps}>
	<span className={classNames('-area-inner')}>
	<span className={lineClasses} />
	</span>
	</button>
	<AddElementPopoverComponent
	placement="bottom"
	target={`AddBlockHoverBarArea_${elementId}`}
	isOpen={popoverOpen}
	elementTypes={elementTypes}
	toggle={onToggle}
	container={`#AddBlockHoverBar_${elementId}`}
	areaId={areaId}
	insertAfterElement={elementId}
	/>
	</div>
	);
	}

For reference, here's the last bit of substantial work with this on the hover bar #704

[maxime-rainville]

All done