Now, you are able to use all the blocks exported by the disclosure-layout app. Check out the full list below:
Block name
Description
disclosure-layout
Parent block that enables you to build the disclosure layout using its 3 children blocks: disclosure-trigger, disclosure-content, and disclosure-state-indicator.
disclosure-trigger
Declares the blocks that will be rendered as disclosure triggers i.e. the blocks that when clicked on will open or close the disclosure content (defined by the disclosure-content block).
disclosure-content
Declares the blocks that are responsible for displaying the desired content when the disclosure trigger is clicked on.
disclosure-state-indicator
Optional block responsible for rendering chevron or other UI elements that change when the disclosure is opened or closed.
disclosure-layout-group
Wraps many disclosure-layouts blocks at once. You may use this block to control when each one of them should be displayed, making it possible to have only one disclosure-layout open at a time.
disclosure-trigger-group
Wraps many disclosure-trigger blocks at once. You may use this block to control when and how the disclosure-layouts blocks declared inside the disclosure-layout-group should be displayed.
Step 2 - Adding the Disclosure Layout' blocks to your theme's templates
According to your desire, copy one of the examples stated below and paste it in your theme's desired template, making the necessary changes. Remember to add the disclosure-layoutblock to the template's block list if needed.
Simple example:
{"disclosure-layout#simple":{"children":["disclosure-trigger#simple","disclosure-content#simple"]},"disclosure-trigger#simple":{"children":["rich-text#question"]},"disclosure-content#simple":{"children":["rich-text#answer"]},"rich-text#question":{"props":{"text":"How can I change my shipping address?"}},"rich-text#answer":{"props":{"text":"Call us at the number (212) 1234-1234"}}}
Example using the disclosure-layout-group block:
{"disclosure-layout-group#group":{"children":["disclosure-layout#first","disclosure-layout#second"]},"disclosure-layout#first":{"children":["disclosure-trigger#first","disclosure-content#first"]},"disclosure-trigger#first":{"children":["rich-text#question1"]},"disclosure-content#first":{"children":["rich-text#answer1"]},"rich-text#question1":{"props":{"text":"How can I change my shipping address?"}},"rich-text#answer1":{"props":{"text":"Call us at the number (212) 1234-1234."}},"disclosure-layout#second":{"children":["disclosure-trigger#first","disclosure-content#first"]},"disclosure-trigger#second":{"children":["rich-text#question1"]},"disclosure-content#second":{"children":["rich-text#answer1"]},"rich-text#question2":{"props":{"text":"How can I track my order?"}},"rich-text#answer2":{"props":{"text":"After logging into your account, you can find this info at the link Orders."}}}
Example using the disclosure-state-indicator block:
Defines the initial visibility of the layout content. Possible values are: visible (content initially open) or hidden (content is only displayed with user interaction).
hidden
animated
boolean
Whether or not the layout content should have animations. When set as true, this prop will enable additional data-\* attributes on the content which you can use as selectors in CSS. It will also ensure that the element will get hidden once the transition has ended.
false
disclosure-trigger props
Prop Name
Type
Description
Default value
Show
block
Name of the block that will be rendered when prompt to show the content.
undefined
Hide
block
Name of the block that will be rendered when prompt to hide the content.
undefined
as
string
HTML tag to be applied to the component when it is rendered on the UI.
button
children
block
Name of the block that will be rendered in case no blocks are declared in the Show or Hide props.
List of blocks that will render the desired disclosure content.
undefined
disclosure-state-indicator props
Prop Name
Type
Description
Default value
Show
block
Name of the block that will be rendered when prompt to show the content.
undefined
Hide
block
Name of the block that will be rendered when prompt to hide the content.
undefined
disclosure-layout-group props
Prop Name
Type
Description
Default value
maxVisible
enum
Defines how many disclosure-layout blocks should be displayed at time. Possible values are: one (only one disclosure-layout block should have its content displayed at time) or many (different disclosure-layout's contents can be displayed at time).
one
disclosure-trigger-group props
Prop Name
Type
Description
Default value
Show
block
Name of the block that will be rendered when prompt to show the content.
undefined
Hide
block
Name of the block that will be rendered when prompt to hide the content.
undefined
as
string
HTML tag to be applied to the component when it is rendered on the UI.
button
children
block
Name of the block that will be rendered in case no blocks are declared in the Show or Hide props.