Skip to content

Commit

Permalink
PoC: Show media previews in the list view via new API
Browse files Browse the repository at this point in the history
  • Loading branch information
t-hamano committed Dec 22, 2023
1 parent ebb171b commit f35b97c
Show file tree
Hide file tree
Showing 8 changed files with 88 additions and 54 deletions.
22 changes: 22 additions & 0 deletions docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,19 @@ _Returns_

- `string`: Root client ID

### getBlockImage

Returns the list of the block images.

_Parameters_

- _state_ `Record<string,boolean>`: Current state.
- _clientId_ `string`: Client Id of the block.

_Returns_

- `Record<string,boolean>`: Block images.

### getBlockIndex

Returns the index at which the block corresponding to the specified client ID occurs within the block order, or `-1` if the block does not exist.
Expand Down Expand Up @@ -1638,6 +1651,15 @@ _Returns_

- `Object`: Action object.

### setBlockImage

Action that sets block image.

_Parameters_

- _clientId_ `string`: A block client ID.
- _images_ `string|string[]`: Block images.

### setBlockMovingClientId

Action that enables or disables the block moving mode.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -291,9 +291,9 @@ function ListViewBlockSelectButton(
{ images.map( ( image, index ) => (
<span
className="block-editor-list-view-block-select-button__image"
key={ image.clientId }
key={ index }
style={ {
backgroundImage: `url(${ image.url })`,
backgroundImage: `url(${ image })`,
zIndex: images.length - index, // Ensure the first image is on top, and subsequent images are behind.
} }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,48 +12,6 @@ import { store as blockEditorStore } from '../../store';
// Maximum number of images to display in a list view row.
const MAX_IMAGES = 3;

function getImage( block ) {
if ( block.name !== 'core/image' ) {
return;
}

if ( block.attributes?.url ) {
return {
url: block.attributes.url,
alt: block.attributes.alt,
clientId: block.clientId,
};
}
}

function getImagesFromGallery( block ) {
if ( block.name !== 'core/gallery' || ! block.innerBlocks ) {
return [];
}

const images = [];

for ( const innerBlock of block.innerBlocks ) {
const img = getImage( innerBlock );
if ( img ) {
images.push( img );
}
if ( images.length >= MAX_IMAGES ) {
return images;
}
}

return images;
}

function getImagesFromBlock( block, isExpanded ) {
const img = getImage( block );
if ( img ) {
return [ img ];
}
return isExpanded ? [] : getImagesFromGallery( block );
}

/**
* Get a block's preview images for display within a list view row.
*
Expand All @@ -67,17 +25,15 @@ function getImagesFromBlock( block, isExpanded ) {
* @return {Array} Images.
*/
export default function useListViewImages( { clientId, isExpanded } ) {
const { block } = useSelect(
const images = useSelect(
( select ) => {
const _block = select( blockEditorStore ).getBlock( clientId );
return { block: _block };
return select( blockEditorStore ).getBlockImage( clientId ) || [];
},
[ clientId ]
);

const images = useMemo( () => {
return getImagesFromBlock( block, isExpanded );
}, [ block, isExpanded ] );

return images;
const filteredImages = useMemo(
() => images.slice( 0, MAX_IMAGES ),
[ images ]
);
return isExpanded ? [] : filteredImages;
}
14 changes: 14 additions & 0 deletions packages/block-editor/src/store/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -1678,6 +1678,20 @@ export function setBlockVisibility( updates ) {
};
}

/**
* Action that sets block image.
*
* @param {string} clientId A block client ID.
* @param {string|string[]} images Block images.
*/
export function setBlockImage( clientId, images ) {
return {
type: 'SET_BLOCK_IMAGE',
images: castArray( images ),
clientId,
};
}

/**
* Action that sets whether a block is being temporaritly edited as blocks.
*
Expand Down
21 changes: 21 additions & 0 deletions packages/block-editor/src/store/reducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -1285,6 +1285,26 @@ export function blockVisibility( state = {}, action ) {
return state;
}

/**
* Reducer tracking the block images.
*
* @param {Record<string,boolean>} state Current state.
* @param {Object} action Dispatched action.
*
* @return {Record<string,boolean>} Block images.
*/
export function blockImage( state = {}, action ) {
if ( action.type === 'SET_BLOCK_IMAGE' ) {
const { clientId, images } = action;
return {
...state,
[ clientId ]: images,
};
}

return state;
}

/**
* Internal helper reducer for selectionStart and selectionEnd. Can hold a block
* selection, represented by an object with property clientId.
Expand Down Expand Up @@ -2026,6 +2046,7 @@ const combinedReducers = combineReducers( {
temporarilyEditingAsBlocks,
blockVisibility,
blockEditingModes,
blockImage,
styleOverrides,
removalPromptData,
blockRemovalRules,
Expand Down
11 changes: 11 additions & 0 deletions packages/block-editor/src/store/selectors.js
Original file line number Diff line number Diff line change
Expand Up @@ -2709,6 +2709,17 @@ export function isBlockVisible( state, clientId ) {
return state.blockVisibility?.[ clientId ] ?? true;
}

/**
* Returns the list of the block images.
*
* @param {Record<string,boolean>} state Current state.
* @param {string} clientId Client Id of the block.
* @return {Record<string,boolean>} Block images.
*/
export function getBlockImage( state, clientId ) {
return state?.blockImage?.[ clientId ];
}

/**
* Returns the list of all hidden blocks.
*
Expand Down
6 changes: 6 additions & 0 deletions packages/block-library/src/gallery/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@ function GalleryEdit( props ) {
const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;

const {
setBlockImage,
__unstableMarkNextChangeAsNotPersistent,
replaceInnerBlocks,
updateBlockAttributes,
Expand Down Expand Up @@ -154,6 +155,11 @@ function GalleryEdit( props ) {
} );
}, [ newImages ] );

useEffect( () => {
const imageUrls = images.map( ( { url } ) => url );
setBlockImage( clientId, imageUrls );
}, [ images, clientId, setBlockImage ] );

const imageSizeOptions = useImageSizes(
imageData,
isSelected,
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/image/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export function ImageEdit( {
captionRef.current = caption;
}, [ caption ] );

const { __unstableMarkNextChangeAsNotPersistent } =
const { setBlockImage, __unstableMarkNextChangeAsNotPersistent } =
useDispatch( blockEditorStore );

useEffect( () => {
Expand All @@ -139,6 +139,10 @@ export function ImageEdit( {
}
}, [ align ] );

useEffect( () => {
setBlockImage( clientId, url );
}, [ url, clientId, setBlockImage ] );

const ref = useRef();
const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand Down

0 comments on commit f35b97c

Please sign in to comment.