Skip to content

Try using DataViewsPicker in an updated media modal #71944

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tellthemachines merged 17 commits into from
Oct 24, 2025
Merged

Try using DataViewsPicker in an updated media modal #71944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9b167f8
Try using DataViewsPicker in an updated media modal
tellthemachines Sep 29, 2025
e1fc930
Improve modal style
tellthemachines Sep 30, 2025
5fe8b7f
Make modal private
tellthemachines Oct 13, 2025
08779c3
Add media modal experiment and adapter
tellthemachines Oct 16, 2025
2d43884
more grammar
tellthemachines Oct 16, 2025
5f1d67b
ignore the stupid error
tellthemachines Oct 17, 2025
7d693a6
Add new filter for the new media modal
tellthemachines Oct 19, 2025
b7b2c4a
Use experiment in FeaturedImageEdit
tellthemachines Oct 20, 2025
71460e1
add dataviews styles to editor package
tellthemachines Oct 20, 2025
0bd40fd
Add filter to edit- and customize-widgets
tellthemachines Oct 22, 2025
9d3f37a
remove check in featured image
tellthemachines Oct 22, 2025
18c0e04
enable selecting across multiple pages
tellthemachines Oct 23, 2025
3c7dc79
remove changelog update
tellthemachines Oct 23, 2025
24a1d55
Add package references
tellthemachines Oct 23, 2025
4ceaf17
Add dropzone
tellthemachines Oct 23, 2025
226aa6d
use untransformed data in picker
tellthemachines Oct 23, 2025
27a7af4
Add new modal to post featured image
tellthemachines Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-dataviews-media-modal', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalDataViewsMediaModal = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
}
Expand Down
12 changes: 12 additions & 0 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,18 @@ function gutenberg_initialize_experiments_settings() {
)
);

add_settings_field(
'gutenberg-dataviews-media-modal',
__( 'Data Views: new media modal', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Enables a new media modal experience powered by Data Views for improved media library management.', 'gutenberg' ),
'id' => 'gutenberg-dataviews-media-modal',
)
);

add_settings_field(
'gutenberg-full-page-client-side-navigation',
__( 'Interactivity API: Full-page client-side navigation', 'gutenberg' ),
Expand Down
4 changes: 4 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 44 additions & 2 deletions packages/block-editor/src/components/inserter/media-tab/media-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,64 @@
import { __ } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
import { Button } from '@wordpress/components';
import { useCallback, useMemo } from '@wordpress/element';
import { useCallback, useMemo, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { MediaCategoryPanel } from './media-panel';
import MediaUploadCheck from '../../media-upload/check';
import MediaUpload from '../../media-upload';
import MediaUploadModal from '../../media-upload-modal';
import { useMediaCategories } from './hooks';
import { getBlockAndPreviewFromMedia } from './utils';
import MobileTabNavigation from '../mobile-tab-navigation';
import CategoryTabs from '../category-tabs';
import InserterNoResults from '../no-results';
import { store as blockEditorStore } from '../../../store';

const ALLOWED_MEDIA_TYPES = [ 'image', 'video', 'audio' ];

/**
* Conditional Media component that uses MediaUploadModal when experiment is enabled,
* otherwise falls back to MediaUpload.
*
* @param {Object} root0 Component props.
* @param {Function} root0.render Render prop function that receives { open } object.
* @return {JSX.Element} The component.
*/
function ConditionalMediaUpload( { render, ...props } ) {
const [ isModalOpen, setIsModalOpen ] = useState( false );
const mediaUpload = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().mediaUpload;
}, [] );

if ( window.__experimentalDataViewsMediaModal ) {
return (
<>
{ render && render( { open: () => setIsModalOpen( true ) } ) }
<MediaUploadModal
{ ...props }
isOpen={ isModalOpen }
onClose={ () => {
setIsModalOpen( false );
props.onClose?.();
} }
onSelect={ ( media ) => {
setIsModalOpen( false );
props.onSelect?.( media );
} }
onUpload={ mediaUpload }
/>
</>
);
}

return <MediaUpload { ...props } render={ render } />;
}

function MediaTab( {
rootClientId,
selectedCategory,
Expand Down Expand Up @@ -65,7 +107,7 @@ function MediaTab( {
{ children }
</CategoryTabs>
<MediaUploadCheck>
<MediaUpload
<ConditionalMediaUpload
multiple={ false }
onSelect={ onSelectMedia }
allowedTypes={ ALLOWED_MEDIA_TYPES }
Expand Down
42 changes: 41 additions & 1 deletion packages/block-editor/src/components/media-placeholder/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,53 @@ import deprecated from '@wordpress/deprecated';
* Internal dependencies
*/
import MediaUpload from '../media-upload';
import MediaUploadModal from '../media-upload-modal';
import MediaUploadCheck from '../media-upload/check';
import URLPopover from '../url-popover';
import { store as blockEditorStore } from '../../store';
import { parseDropEvent } from '../use-on-block-drop';

const noop = () => {};

/**
* Conditional Media component that uses MediaUploadModal when experiment is enabled,
* otherwise falls back to MediaUpload.
*
* @param {Object} root0 Component props.
* @param {Function} root0.render Render prop function that receives { open } object.
* @return {JSX.Element} The component.
*/
function ConditionalMediaUpload( { render, ...props } ) {
const [ isModalOpen, setIsModalOpen ] = useState( false );
const mediaUpload = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
return getSettings().mediaUpload;
}, [] );

if ( window.__experimentalDataViewsMediaModal ) {
return (
<>
{ render && render( { open: () => setIsModalOpen( true ) } ) }
<MediaUploadModal
{ ...props }
isOpen={ isModalOpen }
onClose={ () => {
setIsModalOpen( false );
props.onClose?.();
} }
onSelect={ ( media ) => {
setIsModalOpen( false );
props.onSelect?.( media );
} }
onUpload={ mediaUpload }
/>
</>
);
}

return <MediaUpload { ...props } render={ render } />;
}

const InsertFromURLPopover = ( {
src,
onChange,
Expand Down Expand Up @@ -448,7 +488,7 @@ export function MediaPlaceholder( {
};
const libraryButton = mediaLibraryButton ?? defaultButton;
const uploadMediaLibraryButton = (
<MediaUpload
<ConditionalMediaUpload
addToGallery={ addToGallery }
gallery={ multiple && onlyAllowsImages() }
multiple={ multiple }
Expand Down
40 changes: 39 additions & 1 deletion packages/block-editor/src/components/media-replace-flow/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
ToolbarButton,
} from '@wordpress/components';
import { useSelect, withDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { DOWN } from '@wordpress/keycodes';
import {
postFeaturedImage,
Expand All @@ -26,13 +27,50 @@ import { store as noticesStore } from '@wordpress/notices';
* Internal dependencies
*/
import MediaUpload from '../media-upload';
import MediaUploadModal from '../media-upload-modal';
import MediaUploadCheck from '../media-upload/check';
import LinkControl from '../link-control';
import { store as blockEditorStore } from '../../store';

const noop = () => {};
let uniqueId = 0;

/**
* Conditional Media component that uses MediaUploadModal when experiment is enabled,
* otherwise falls back to MediaUpload.
*
* @param {Object} root0 Component props.
* @param {Function} root0.render Render prop function that receives { open } object.
* @return {JSX.Element} The component.
*/
function ConditionalMediaUpload( { render, ...props } ) {
Copy link
Contributor

@talldan talldan Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor: I know it's a temporary component for the experiment, but maybe it's worth only having one of these components in the block editor package that's imported where needed within the package.

I was wondering if the logic could be in the existing MediaUpload, though I guess that means anyone importing the component gets new modal. Maybe there are also other concerns with that.

Copy link
Contributor

@andrewserong andrewserong Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was just going to comment with a similar idea. Could we put ConditionalMediaUpload in components/media-upload-modal to remove a little duplication? Not a huge issue, just a nit 😄

const [ isModalOpen, setIsModalOpen ] = useState( false );
const { getSettings } = useSelect( blockEditorStore );

if ( window.__experimentalDataViewsMediaModal ) {
return (
<>
{ render && render( { open: () => setIsModalOpen( true ) } ) }
<MediaUploadModal
{ ...props }
isOpen={ isModalOpen }
onClose={ () => {
setIsModalOpen( false );
props.onClose?.();
} }
onSelect={ ( media ) => {
setIsModalOpen( false );
props.onSelect?.( media );
} }
onUpload={ getSettings().mediaUpload }
/>
</>
);
}

return <MediaUpload { ...props } render={ render } />;
}

const MediaReplaceFlow = ( {
mediaURL,
mediaId,
Expand Down Expand Up @@ -157,7 +195,7 @@ const MediaReplaceFlow = ( {
<>
<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
<MediaUploadCheck>
<MediaUpload
<ConditionalMediaUpload
gallery={ gallery }
addToGallery={ addToGallery }
multiple={ multiple }
Expand Down
18 changes: 18 additions & 0 deletions packages/block-editor/src/components/media-upload-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* WordPress dependencies
*/
import { withFilters } from '@wordpress/components';

/**
* This is a placeholder for the media upload modal component necessary to make it possible to provide
* an integration with the core blocks that handle media files. By default it renders nothing but
* it provides a way to have it overridden with the `editor.MediaUploadModal` filter.
*
* @return {Component} The component to be rendered.
*/
const MediaUploadModal = () => null;
Copy link
Contributor

@talldan talldan Oct 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very minor as well, but I wonder if it could be called something like DataViewsMediaModal to distinguish it a bit more from the other component.


/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md
*/
export default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );
2 changes: 2 additions & 0 deletions packages/block-editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import {
useBlockElementRef,
useBlockElement,
} from './components/block-list/use-block-props/use-block-refs';
import { default as MediaUploadModal } from './components/media-upload-modal';

/**
* Private @wordpress/block-editor APIs.
Expand Down Expand Up @@ -110,4 +111,5 @@ lock( privateApis, {
essentialFormatKey,
useBlockElement,
useBlockElementRef,
MediaUploadModal,
} );
25 changes: 24 additions & 1 deletion packages/customize-widgets/src/filters/replace-media-upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,30 @@
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { MediaUpload } from '@wordpress/media-utils';
import {
MediaUpload,
privateApis as mediaUtilsPrivateApis,
} from '@wordpress/media-utils';

/**
* Internal dependencies
*/
import { unlock } from '../lock-unlock';

const { MediaUploadModal: MediaUploadModalComponent } = unlock(
mediaUtilsPrivateApis
);

if ( window.__experimentalDataViewsMediaModal ) {
// Create a new filter for the MediaUploadModal component
addFilter(
'editor.MediaUploadModal',
'core/customize-widgets/replace-media-upload-modal',
() => {
return MediaUploadModalComponent;
}
);
}

const replaceMediaUpload = () => MediaUpload;

Expand Down
25 changes: 24 additions & 1 deletion packages/edit-widgets/src/filters/replace-media-upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,30 @@
* WordPress dependencies
*/
import { addFilter } from '@wordpress/hooks';
import { MediaUpload } from '@wordpress/media-utils';
import {
MediaUpload,
privateApis as mediaUtilsPrivateApis,
} from '@wordpress/media-utils';

/**
* Internal dependencies
*/
import { unlock } from '../lock-unlock';

const { MediaUploadModal: MediaUploadModalComponent } = unlock(
mediaUtilsPrivateApis
);

if ( window.__experimentalDataViewsMediaModal ) {
// Create a new filter for the MediaUploadModal component
addFilter(
'editor.MediaUploadModal',
'core/edit-widgets/replace-media-upload-modal',
() => {
return MediaUploadModalComponent;
}
);
}

const replaceMediaUpload = () => MediaUpload;

Expand Down
Loading
Loading