Multi-Select Bulk Actions Gallery Block for React

Anywhere on it. The checkbox's own hit area is stretched over the whole tile (the box is static, so its ::after fills the tile's frame), so the picture and the name both tick it, and the tile gets a ring when it is ticked or holds keyboard focus. The checkbox is still a real checkbox named by the scan's title, with its kind and page count as the description.

The block remembers the last tile you ticked or cleared. Hold Shift (with a mouse click, or Shift+Space on a focused checkbox) and tick another tile: every tile between the two, in either direction, takes the state of the one you pressed. Tiles that were deleted are skipped. Touch screens have no Shift, so the hint is hidden on phones; tick tiles one by one or use Select all.

It stays in the grid as a quiet "Removed" cell the size of the tile, with its title, so nothing around it moves and the block keeps its height. Undo delete brings the last batch back, ticked as before. A second delete before you undo replaces what Undo restores.

No. Download, Share and Delete only change what the block shows. It all lives in the block's own state and is gone on reload. Each action says "nothing is saved in this demo" in a polite status line; wire the handlers to your own storage or API when you use it.

The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the picture's own so the layout doesn't change. Keep the tile's ratio the picture's own.

Two columns by four rows, with the date left out of each caption. The bar sits under the grid with its status line first and its buttons wrapping below, and the status keeps room for two lines so a long message never moves the buttons.