Issue#145/add reel block

[jessica-townsend]

Related Issues

• Closes #146

What Was Accomplished

• Copied the Reel block from Ought Blocks on Thought Catalog
• Updated the Reel block to eliminate the need for the Reel Clip Block and the inner container element

How It Was Tested

• [x] Locally on parent theme
• [x] Locally on child theme
• [x] Child theme staging

How To Test

• This is on Thought Catalog develop under "New Originals". There is also the old Reel block under "Old Originals" to compare the two.

Open Questions

• @douglas-johnson I wasn't able to figure out why "allowJustification": false wasn't working for me. I still see Justification settings on the new Reel block. We will never use anything besides the start justification so having this setting available is pointless. The only other option I see is to hide justification is to disable all settings using allowEditing for this block, but that will also disable the vertical alignment setting which I think would be nice to have. Let me know what you think.

Deploy Steps

• Update Cata Blocks on Thoughtnet
• On Thought Catalog:
  • Update Cata Blocks
  • Change instances of the Reel block to the new Reel block in the editor
  • Remove Reel and Reel Clip from Ought Blocks plugin

[douglas-johnson]

The existing version of this has an inner container which uses fit-content width and auto margin to center align the items when they are smaller than the available width. I think we still want that.

If I try to recreate it with the justification in the editor, it looks right with a small number of items, but the content at the start gets cut off when there are enough items to need scrolling.

[jessica-townsend]

I see what you mean @douglas-johnson , it would have been nice to just use the flex layout for the entire block but I'll rewrite it to include the inner container

[jessica-townsend]

@douglas-johnson I made an update to this which uses a row block as the inner container with the custom class so we can apply the fit-content property, but there are still a couple issues:

1. Inner blocks are still appearing off-center. Using inline-size instead of flex-basis seems to fix this in dev tools.
2. The right side padding isn't working properly so there isn't enough space between the content and the right edge of the reel container

Thought Catalog develop is up to date with this latest version. I've been trying to factor away the need to use the Reel Clip block and use sizing & layout options that are already available in core, but if flex-basis isn't working with fit-content I'm thinking we'll have to add the Reel Clip block after all. Let me know what you think!

[douglas-johnson]

Yeah it seems like it has to use reel clip to have the same functionality, sorry for the re-work.

[jessica-townsend]

@douglas-johnson updated on develop with the reel clip block