Media Gallery Technical Design

How the media gallery is currently used:

Meida gallery is operated by lib/web/mage/adminhtml/browser.js that is loading the content using the URL passed to openDialog method from cms_wysiwyg_images_index layout handle. The file also contains the mediabrowser widget declaration.

openDialog: function (url, width, height, title, options)

The \Magento\Cms\Controller\Adminhtml\Wysiwyg\Images\Index controller is adding overlay_popup layout handle and setting storeId to wysiwyg_images.js block

! wysiwyg_images.js block does not exist in the Magento codebase.

cms_wysiwyg_images_index layout

\Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content block:

• Adds type request param to contents URL
• Uses target_element_id request parameter
• Renders mediabrowser configuration json

\Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Tree block:

• Uses current_tree_path request parameter for tree loader URL
• Initializes folderTree widget with options

Magento\Cms\Block\Adminhtml\Wysiwyg\Images\Content\Uploader block:

• Renders uploader button and js

Possible extension points

• Change the requested URL by each element (issue: dependency on configuration)
• Override the cms_wysiwyg_images_index layout (issue: dependency on configuration)
• Replace lib/web/mage/adminhtml/browser.js (Mediabrowserutility) with specific Media Gallery implementation (usage and configuration on element's side)

Refactoring tasks

• Move the mediabrowser widget declaration to a separate file from lib/web/mage/adminhtml/browser.js. Keep the mediabrowser reference for loading the widget (in app/code/Magento/Theme/view/frontend/requirejs-config.js)