Resolve "Name elements in the element modal"

What is in this MR

At the moment when a page has many elements in it, it's hard to distinguish between them in the Elements dropdown. The ordering works brilliantly, so you can guess which element to click on, but it's still a little tricky.

In this MR we introduce a getDisplayName function in the element type registry. By default an element will always fallback to what we currently have in develop, showing its element type name (e.g. "Heading"). If however we have more values to use (e.g. a label, a URL, a placeholder, etc) then we'll use it to help distinguish it from other elements.

The same getDisplayName is now also used in the data explorer form data.

How to test this MR

• Create a page with lots of elements.
• Keep re-visiting the Elements dropdown, and the Data Explorer (if the elements supports form data).
• If you need to see when an element uses a particular property, you can check its getDisplayName in the element registry, or look at elementTypes.spec.js.

Merge Request Checklist

• changelog.md has been updated if required.
• New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
• The latest Chrome and Firefox have been used to test any new frontend features
• Documentation has been updated
• Quality Standards are met
• Performance: tables are still fast with 100k+ rows, 100+ field tables
• The redoc API pages have been updated for any REST API changes
• Our custom API docs are updated for changes to endpoints accessed via api tokens
• The UI/UX has been updated following UI Style Guide

Closes #2315 (closed)