Blocks App: Version 1

[zcolah]

This ticket is a WIP

Intro

Freestyle users will now be able to create Blocks in the Zesty platform for different types of sections on their website such as Hero, Feature, Testimonials, etc. These blocks can then be leveraged and used to build web pages in Freestyle.

The setup process looks like this:

1. The user creates a Block Model in the Schema App
2. The user adds code to the supporting code template file in the Code App
3. The user creates, saves, and publishes a variant of block in the Blocks App
4. The user drags and drops this variant of the Block into a web page in the Freestyle App

User Flows to Build

Schema App

All Models Page

• [x] Creates a Block Model

View Model Page

• [x] Adds fields to the Block Model
• [x] Info Tab

Code App

• [ ] Edits, Saves, and Publishes code template file in the Code App

Blocks App

All Blocks Page

User:

• [x] Views All Blocks
• [x] Creates Block (shortcut)
• [ ] Searches All Blocks via Sidebar
• [ ] Searches All Blocks via the All Blocks Section (Success)
• [ ] Searches All Blocks via the All Blocks Section (Failure)
• [ ] Adds Block Group
• [ ] Delete Block Group
• [ ] Adds Block to Block Group
• [x] Changes Group a Block Belongs to

Stylesheets Page

User:

• [ ] Views and Adds a Stylesheet File
• [ ] Extracts classes from Stylesheet

Scripts Page

• [ ] Views and Adds a Javascript File

Create Variant Page

• [ ] Creates Variant

View Block Variants Page

• [ ] Views Variant
• [ ] Edits, Saves, and Publishes a Variant
• [ ] Opens More Menu:
  • [ ] Copy ZUID
  • [ ] Edit Code Template
  • [ ] Edit Model
  • [ ] Duplicate Variant
  • [ ] Delete Variant
  • [ ] Views API endpoints
• [ ] Searches Component Variants (Success)
• [ ] Searches Component Variants (Failure)
• [ ] Sorts Component Variants
• [ ] Switches to Another Variant
• [ ] Creates Variant
• [ ] Switches to Info Tab

Developer Notes

Instances API Updates

• [ ] https://github.com/zesty-io/instances-api/issues/611

  Web Engine Updates

• [ ] https://github.com/zesty-io/webengine/issues/432

Permission

All users with access to the Content App, should be able to see the Blocks App.

Figma

https://www.figma.com/design/oiesa7e6Q5mcGEAyOjYCtJ/Blocks-App?node-id=132-1587&m=dev&t=7je4uuIZAJBCjEAh-1

[zcolah]

Future Phases Plan

Search App

• [ ] User searches for Variant
• [ ] User searches for Block Model

Roles App

• [ ] Update the dropdown description to reflect the Blocks App

Activity Log App

• [ ] Add filter for blocks
• [ ] Clearly describe how variants should load up in the Activity Log

Freestyle App

User:

• [ ] Switches to the Blocks Tab
• [ ] Adds a Block Variant to the Layout
• [ ] Creates and Adds a Block Variant to the Layout
• [ ] Selects & Edits a Block Variant
• [ ] Delete a Block Variant

Schema App

View Model Page

• [x] Adds a Block Field Type to a Model

Blocks App

View Block Variant Page

• [ ] Hovers overs a Field and sees it get selected on the preview
• [ ] Hovers and clicks on an element in the preview and sees it get selected in the fields column

Content App

View Content Item

• [ ] Views Item with Block Field Type and Selects + Adds Variant