WDS Blocks 2.0: Carousel Block

[gregrickaby]

Need to replicate the ACF Carousel Block in native Gutenberg. Please use the feature/block-2.0 branch as your base.

[coreymcollins]

User Stories

As a site admin, I want to be able to add a repeatable group for slide content so that I can add multiple slides to the carousel.

As a site admin, I want to be able to select a background color so that the color is displayed as the background of an individual slide.

As a site admin, I want to be able to upload an image so that the image is displayed as the background of an individual slide.

As a site admin, I want to be able to upload a video so that the video is displayed as the background of an individual slide.

As a site admin, I want to be able to set the font color so that I can ensure an individual slide’s text is readable when displayed over its background element.

As a site admin, I want to be able to add a title so that it is displayed as an individual slide’s title.

As a site admin, I want to be able to add text so that it is displayed as an individual slide’s content.

As a site admin, I want to be able to search for or manually set a link so that it is displayed as a clickable button in an individual slide.

As a user, I want to be able to click or tap on the left and right navigation arrows so that I can navigate through the slides in the carousel.

As a user, I want to be able to swipe left and right on the carousel so that I can navigate through the slides in the carousel.

As a user, I want to be able to click or tap on the pagination dots below the carousel so that I am taken to the slide for the pagination dot.

As a user, I want to be able to click on the button in a slide so that I am taken to the URL provided for the button.

[ravewebdev]

@gregrickaby @coreymcollins Here's an overview of my plan so far (similar plan to @dcooney's for the Accordion block).

Create a 3-tiered block structure involving 2 new custom blocks, as defined below:

Carousel Block

• Top-level custom parent block
• Contains global block settings via inspector panel (though none defined so far)
• Displays child blocks via InnerBlocks, limited to the Slide Block

Slide Block

• Middle-level custom child block
• Limited to displaying only for the Carousel Block (i.e., not available as a top-level block or as a child of any other blocks)
• Contains settings specific to the individual slide via inspector panel:
  • Background (image, video, color)
  • Font Color
• Displays child blocks via InnerBlocks, limited to certain globally-available blocks (e.g., paragraph, heading)
• Defines a simple inner block template, pre-populated with dummy placeholder content (e.g., "Slide Title" for heading block and "Slide Content" for paragraph block)
  • Default template includes heading ("title"), paragraph ("content"), and button

Note: As the core blocks to be used as inner-most child blocks have built-in font color styling controls, we can either a) nix the slide-level font color control entirely or b) implement slide-level font color control and have the child blocks inherit this if no custom color selection is chosen.

Admin Display

When the carousel (or inner blocks) are not selected, the editor view will mimic the frontend view (i.e., a proper carousel/slider view).
When the carousel (or inner blocks) are selected, the editor view will display the slides separately in a list so all content is editable.

[gregrickaby]

@ravewebdev This sounds good to me. I think we'd want to go with color option b.

[ravewebdev]

8/25 EOD Update:

• Reorganized block folders to follow @dcooney's file structure for #78.
• Added alignment options to carousel block.

I took a step back and spent most of the day working on global functionality/styling that can be shared between this and the accordion block:

• #82: Add global block style partials with block edit mode mixin
• #83: Add component and hook to handle toggling edit/preview modes

[ravewebdev]

8/26 EOD Update:

• Applied edit mode functionality and styling (from #82 and #83).
• "Locked" block editing while in preview mode.
• Added fontColor attribute to carousel-slide block with associated setting via InspectorControl.
• Wrapped carousel-slide block in withColors HOC to simplify applying color-related class/style to block.

[ravewebdev]

8/27 EOD Update:

• Updated carousel preview mode to remove template lock and simply hide appender buttons.
• Updated carousel template to include a single slide upon block creation.
• Limited slide block to display only within carousel block.
• Fixed slide template to prevent errors with heading block.
• Merged in and implemented constants from #86.
• Set up backgroundColor attribute for testing purposes (will likely be changed/replaced later).

[ravewebdev]

8/28 EOD Update:

• Fixed custom font color handling.
• Added background settings via InspectorControl:
  • Background type select: none, color, image, video
  • Background color (moved/modified from previous implementation)
  • Background image
  • Background video (in progress)

[ravewebdev]

8/31 EOD Update:

• Updated carousel styling.
• Fixed slide background class/style declarations.
• Refactored:
  • Created Settings component for slide settings (edit only).
  • Created Slide component to display individual slide.
  • Created withBackgroundImage global HOC to handle displaying component with background image.
  • Created withBackgroundVideo global HOC to handle displaying component with background video.
  • Created withFontColor global HOC to handle displaying component with custom font color.
• Did initial testing/exploration for implementation of carousel functionality.

[ravewebdev]

9/1 EOD Update:

• Refactored:
  • Created withBackgroundColor global HOC to handle displaying component with custom background color.
  • Finished integrating global HOCs with Slide component.
• Fixed editor carousel width display.
• Added context for showPreview so carousel-slide child block can access it.
• Added outer pure-react-carousel wrap markup components to edit function.
  • Ran into weird errors adding markup to save function (will require more work).
• Updated slider block to default to edit mode when first inserted into post.

[ravewebdev]

9/2 EOD Update:

• Removed pure-react-carousel package and elements, as this was not working with Gutenberg.
• Installed glidejs package to handle slider with plain JS. Implemented markup, functionality, basic styling in editor preview mode.
• Modified with "experimental" props to simplify editor markup.
• Started fresh branch for global HOCs and settings: PR #90
  • Reorganizes global utils directory, recreating setting style HOCs from carousel block.
  • Plan to also move inspector color/background settings to utils as well, though may hold off until next sprint (up for discussion tomorrow).

[ravewebdev]

9/3 EOD Update:

• Added slideCount attribute and corresponding property via withSelect to track current number of slides per carousel.
• Updated carousel to default to edit mode when new block inserted.
• Added backgroundVideo JS module to handle muting video backgrounds in preview mode.
• Added glidejs and custom slider classes/wrappers to save function for both blocks.
• Merged in changes from PRs #90 & #93.
• Updated admin and FE carousel styles.
• Added JS module to init carousel blocks on frontend.
• Created utils/config.js for carousel block to hold glidejs config.
• Started README.md for carousel block.

Global updates:

• Finished and merged PR #90 to make changes to utils directory available to both blocks.
• Created and merged PR #93 to update global mixin styles.

[ravewebdev]

9/4 EOD Update:

• Removed rich-text block from carousel branch and updated plugin file accordingly.
• Added double-click preview/edit mode toggle.
• Updated admin styling of carousel block.
• Abstracted InnerBlocks.props to block-level config.js files.
• Added filters for InnerBlocks.props, glideJS config, and slider prev/next button text.
• Finished initial README.mds for both blocks.
• Added editor screenshots for both blocks, included in README.mds.

PR #85 ready for review.