Skip to content
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.

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

[Inserter]: Add media tab #44918

Merged
merged 18 commits into from
Nov 25, 2022
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
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
24 changes: 24 additions & 0 deletions lib/compat/wordpress-6.2/edit-form-blocks.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?php
/**
* Patches resources loaded by the block editor page.
*
* @package gutenberg
*/

/**
* Adds the preload paths registered in Core (`edit-form-blocks.php`).
*
* @param array $preload_paths Preload paths to be filtered.
* @param WP_Block_Editor_Context $context The current block editor context.
* @return array
*/
// @codingStandardsIgnoreStart - unused $context parameter.
function gutenberg_preload_paths_6_2( $preload_paths, $context ) {
// Preload initial media requests that are needed to conditionally display the media tab in the inserter.
foreach ( array( 'image', 'video', 'audio' ) as $media_type ) {
$preload_paths[] = "wp/v2/media?context=view&per_page=1&_fields=id&media_type={$media_type}";
}

return $preload_paths;
}
add_filter( 'block_editor_rest_api_preload_paths', 'gutenberg_preload_paths_6_2', 10, 2 );
1 change: 1 addition & 0 deletions lib/load.php
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/compat/wordpress-6.2/default-filters.php';
require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-resolver-6-2.php';
require __DIR__ . '/compat/wordpress-6.2/class-wp-theme-json-6-2.php';
require __DIR__ . '/compat/wordpress-6.2/edit-form-blocks.php';

// Experimental features.
remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WP 6.0's stopgap handler for Webfonts API.
Expand Down
101 changes: 101 additions & 0 deletions packages/block-editor/src/components/inserter/media-tab/hooks.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { useDebounce } from '@wordpress/compose';

/**
* Internal dependencies
*/
import { store as blockEditorStore } from '../../../store';

export function useDebouncedInput() {
const [ input, setInput ] = useState( '' );
const [ debounced, setter ] = useState( '' );
const setDebounced = useDebounce( setter, 250 );
useEffect( () => {
if ( debounced !== input ) {
setDebounced( input );
}
}, [ debounced, input ] );
return [ input, setInput, debounced ];
}

export function useMediaResults( options = {} ) {
const [ results, setResults ] = useState();
const settings = useSelect(
( select ) => select( blockEditorStore ).getSettings(),
[]
);
useEffect( () => {
( async () => {
setResults();
const _media = await settings?.__unstableFetchMedia( options );
if ( _media ) setResults( _media );
} )();
}, [ ...Object.values( options ) ] );
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
return results;
}

const MEDIA_CATEGORIES = [
Copy link
Member

Choose a reason for hiding this comment

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

Not for this PR, but we need to make sure this is easily filterable and that it can accurately reflect the extensibility of the media library.

{ label: __( 'Images' ), name: 'images', mediaType: 'image' },
{ label: __( 'Videos' ), name: 'videos', mediaType: 'video' },
{ label: __( 'Audio' ), name: 'audio', mediaType: 'audio' },
];
export function useMediaCategories( rootClientId ) {
const [ categories, setCategories ] = useState( [] );
const { canInsertImage, canInsertVideo, canInsertAudio, fetchMedia } =
useSelect(
( select ) => {
const { canInsertBlockType, getSettings } =
select( blockEditorStore );
return {
fetchMedia: getSettings().__unstableFetchMedia,
canInsertImage: canInsertBlockType(
'core/image',
rootClientId
),
canInsertVideo: canInsertBlockType(
'core/video',
rootClientId
),
canInsertAudio: canInsertBlockType(
'core/audio',
rootClientId
),
};
},
[ rootClientId ]
);
useEffect( () => {
( async () => {
// If `__unstableFetchMedia` is not defined in block
// editor settings, do not set any media categories.
if ( ! fetchMedia ) return;
const query = {
context: 'view',
per_page: 1,
_fields: [ 'id' ],
};
const [ image, video, audio ] = await Promise.all( [
fetchMedia( { ...query, media_type: 'image' } ),
fetchMedia( { ...query, media_type: 'video' } ),
fetchMedia( { ...query, media_type: 'audio' } ),
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if it's better to actually show the tab and then show a placeholder in the tab instead of hiding the tab if there are not corresponding media (arguable of course)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

No strong opinions here.. Something definitely fit for a follow up though I think. --cc @jasmussen @jameskoster

] );
const showImage = canInsertImage && !! image.length;
const showVideo = canInsertVideo && !! video.length;
const showAudio = canInsertAudio && !! audio.length;
setCategories(
MEDIA_CATEGORIES.filter(
( { mediaType } ) =>
( mediaType === 'image' && showImage ) ||
( mediaType === 'video' && showVideo ) ||
( mediaType === 'audio' && showAudio )
)
);
} )();
}, [ canInsertImage, canInsertVideo, canInsertAudio, fetchMedia ] );
return categories;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { default as MediaTab } from './media-tab';
export { MediaCategoryDialog } from './media-panel';
export { useMediaCategories } from './hooks';
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
/**
* WordPress dependencies
*/
import {
__unstableComposite as Composite,
__unstableUseCompositeState as useCompositeState,
__unstableCompositeItem as CompositeItem,
Tooltip,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useMemo, useCallback } from '@wordpress/element';
import { cloneBlock } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import InserterDraggableBlocks from '../../inserter-draggable-blocks';
import { getBlockAndPreviewFromMedia } from './utils';

function MediaPreview( { media, onClick, composite, mediaType } ) {
const [ block, preview ] = useMemo(
() => getBlockAndPreviewFromMedia( media, mediaType ),
[ media, mediaType ]
);
const title = media.title?.rendered || media.title;
const baseCssClass = 'block-editor-inserter__media-list';
return (
<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
{ ( { draggable, onDragStart, onDragEnd } ) => (
<div
className={ `${ baseCssClass }__list-item` }
draggable={ draggable }
onDragStart={ onDragStart }
onDragEnd={ onDragEnd }
>
<Tooltip text={ title }>
<CompositeItem
role="option"
as="div"
{ ...composite }
className={ `${ baseCssClass }__item` }
onClick={ () => {
onClick( block );
} }
aria-label={ title }
>
<div
className={ `${ baseCssClass }__item-preview` }
>
{ preview }
</div>
</CompositeItem>
</Tooltip>
</div>
) }
</InserterDraggableBlocks>
);
}

function MediaList( {
results,
ntsekouras marked this conversation as resolved.
Show resolved Hide resolved
mediaType,
onClick,
label = __( 'Media List' ),
} ) {
const composite = useCompositeState();
const onPreviewClick = useCallback(
( block ) => {
onClick( cloneBlock( block ) );
},
[ onClick ]
);
return (
<Composite
{ ...composite }
role="listbox"
className="block-editor-inserter__media-list"
aria-label={ label }
>
{ results.map( ( media ) => (
<MediaPreview
key={ media.id }
media={ media }
mediaType={ mediaType }
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this prop already part of the "media" object?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't remember right now, but I think it's fine to keep for now and revisit with the Openverse integration. It's related to your comment about using one source and we might end up doing something like that(a new interface).

onClick={ onPreviewClick }
composite={ composite }
/>
) ) }
</Composite>
);
}

export default MediaList;
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/**
* WordPress dependencies
*/
import { useRef, useEffect } from '@wordpress/element';
import { Spinner, SearchControl } from '@wordpress/components';
import { focus } from '@wordpress/dom';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import MediaList from './media-list';
import { useMediaResults, useDebouncedInput } from './hooks';
import InserterNoResults from '../no-results';

const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;

export function MediaCategoryDialog( { rootClientId, onInsert, category } ) {
const container = useRef();
useEffect( () => {
const timeout = setTimeout( () => {
const [ firstTabbable ] = focus.tabbable.find( container.current );
firstTabbable?.focus();
} );
return () => clearTimeout( timeout );
}, [ category ] );
return (
<div ref={ container } className="block-editor-inserter__media-dialog">
<MediaCategoryPanel
rootClientId={ rootClientId }
onInsert={ onInsert }
category={ category }
/>
</div>
);
}

export function MediaCategoryPanel( { rootClientId, onInsert, category } ) {
const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
const results = useMediaResults( {
per_page: !! debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
media_type: category.mediaType,
search: debouncedSearch,
orderBy: !! debouncedSearch ? 'relevance' : 'date',
} );
const baseCssClass = 'block-editor-inserter__media-panel';
return (
<div className={ baseCssClass }>
<SearchControl
className={ `${ baseCssClass }-search` }
onChange={ setSearch }
value={ search }
label={ sprintf(
/* translators: %s: Name of the media category(ex. 'images, videos'). */
__( 'Search %s' ),
category.label.toLocaleLowerCase()
) }
placeholder={ sprintf(
/* translators: %s: Name of the media category(ex. 'images, videos'). */
__( 'Search %s' ),
category.label.toLocaleLowerCase()
) }
/>
{ ! results && (
<div className={ `${ baseCssClass }-spinner` }>
<Spinner />
</div>
) }
{ Array.isArray( results ) && ! results.length && (
<InserterNoResults />
) }
{ !! results?.length && (
<MediaList
rootClientId={ rootClientId }
onClick={ onInsert }
results={ results }
mediaType={ category.mediaType }
/>
) }
</div>
);
}
Loading