search

funkhaus / fuxt-backend

A theme that turns WordPress into a true Headless CMS. Optimized for the fuxt frontend boilerplate and fuxt-api plugin.
GNU General Public License v3.0
101 stars 19 forks source link

Custom Gutenberg Block - Gallery Scrolling #12

Closed drewbaker closed 3 years ago

drewbaker commented 3 years ago

We need a custom gutenberg block that builds a gallery, but one that shows a single row of images and has scrollbars to move it.

It's important the interface for this looks like a native WordPress block.

Inputs

  1. Gallery of images (should work same as regular gallery block with ordering etc...).

Output

  1. Images: Array of MediaItems in WP-GQL-Gutenberg.

Design:

On the frontend, we will style it to look like this (You do not have to build frontend Vue component):

Screen Shot 2021-05-23 at 4 05 30 PM

So the idea is a long row of images, that are sized 70vw and height auto, and then a "overflow-x: auto" container. Our frontend component will then have a "click and drag" style scroll in place on desktop, or swipe to scroll on mobile. We will use this: https://components.funkhaus.us/?path=/story/ui-scrollers-drag--default

Notes:

I tried getting this working with ACF Blocks here: https://github.com/funkhaus/fuxt-backend/tree/master/blocks

But it didn't work in WP-GQL-Gutenberg and also the interface looks a little ad-hock. This native block request will replace this block.

rsm0128 commented 3 years ago

@drewbaker I pushed a commit to https://github.com/funkhaus/fuxt-blocks to solve this problem. Added mediaItems attribute to GraphQL query

drewbaker commented 3 years ago

Closed now that is in it's own repo