This document describes the options for the profiles wrapper block. Be sure to check out the related documentation for the manual profile block and the data-driven profile block as well.
Block options
Support for margin-top and margin-bottom are included with the dimensions panel.
The profiles (plural) block is a parent wrapper for the manual and data-driven profile blocks. It provides the necessary CSS grid structure to allow for the individual profiles to behave properly at various widths and screen types.
Profile-manualandprofileare the only blocks that are permitted as children of theprofilesblock.Profile-manualandprofilecan, however, be deployed independently of this wrapper block to allow for different layouts involving a profile on a page.
Fields
This block provides one unique field: users can set the number of columns to either one, two or three columns.
Notes
Be sure to include this block as the wrapper block for creating a grid of multiple profile-data blocks on a page. By grouping multiple data-driven blocks together as inner blocks within this wrapper, you ensure that the calls to the ASU Search API for the returned data are done in a performant way.
This wrapper block allows its children profile blocks to behave properly as the screen size reduces in display width from desktop down to mobile.
All combinations of block size (micro, small, large) and the number of columns (one-col, two-col, three-col) are supported in the block editor. However, the layouts involving grids of profiles that work the best in terms of design and readability are as follows:
- One col + “large” profiles – The CSS for this combination intentionally prevents the block from expanding beyond 800px wide for readability.
- Two col + “large” profiles – Limit the description length to a small text length for best results.
- Two col + “small” profiles – Looks great, always.
- Three col + “micro” profiles – Consider using background colors (white or gray 2) to create a proper grid effect.