IntroductionIntroduction
In this guide, we will describe the principle of the card editor in order to easily create cards. The card editor offers plenty of blocks to insert in card in order to show off content from your posts, terms or users. All blocks are handled in the same ways and offer the same kind of settings.
The card editor is based on the WordPress editor. It is not the same editor as the one used on edit or site pages and will not offer the same blocks. It is a dedicated editor for cards based on the WordPress editor as a standalone.
Block InserterBlock Inserter
The block inserter allows you to insert blocks into the card layout. Blocks can be inserted by clicking on the desired block or by dragging and dropping it into the desired area of the card.
List ViewList View
The List View helps you navigate between layers of content and nested blocks. It’s currently visible in the Top Toolbar and will remain open as you navigate through your content.
Cards ListCards List
The Cards List allows you to switch between card editing at any time. It can also be used to easily preview cards or to copy blocks from one card and paste them into another card easily.
CardCard
On the main right panel of the card builder, under the Card tab, you will find several settings to adjust the main behavior and blocks of the card.
LayoutLayout
At first you need to set which type of card you want to build. You have 2 types of card : Masonry or Metro/Justified. A type of card correspond to a grid layout. Masonry cards only work with Masonry grids and Metro/Justified cards work with any type of grid.
The card accepts two different kinds of alignment when set to Masonry type. The card can have the media and content aligned either vertically or horizontally, depending on your needs.
BlocksBlocks
A card is composed of main blocks which are the Header, Media, Body, and Footer. Depending on your needs, you will be able to hide/reveal these card blocks to build your own layout.
ThumbnailThumbnail
If the Card Media block is enabled, you will be able to fine-tune the layout of the media/thumbnail displayed in the card.
BlockBlock
When clicking on any block of the card, you will be able to edit its settings in the main right panel of the editor. In this panel, you will find three main tabs:
- Settings: To edit the block features, set up interactions, and conditions
- Styles: To customize the appearance of the block
- Animation: To reveal or hide the block on mouse hover
SettingsSettings
In this panel, you will be able to set up the main behavior of the block. And, you will find different settings depending on the selected block.
Most of the blocks also offer the following settings:
- Interaction: To redirect on click or open/play a media (image, song, video)
- Conditions: To render a block conditionally
- Advanced: To add custom CSS class names and set up the HTML
<element>of the block
StylesStyles
In this section, you will be able to fully customize the block appearance. The appearance can be set up conditionally depending on CSS selectors like :hover, :focus, :active. This allows you to change the look of the block when hovering over it or when it is focused, for example.
Moreover, these settings are responsive. It means that depending on a browser size (device) that you can select in the editor top toolbar, you will be able to set different styles for desktop, tablet, or mobile devices, for example.
AnimationsAnimations
Animations can be used to reveal or hide a block when the mouse hovers over it or over a parent block on the card. This can be very useful, for example, when you want to display a button only when the mouse hovers over the card.
These settings are also responsive and can be changed depending on the browser width, similar to block styles.
Dynamic DataDynamic Data
In several places of the card editor, you will be able to insert dynamic data. For example, you can insert data into buttons, paragraphs, custom HTML blocks. You can also use dynamic data in certain settings of the block like the URL, aria label, in conditions, etc. This makes things extremely flexible and powerful with endless possibilities.
ConditionsConditions
Because conditions are processed on the backend and impact the frontend, to ensure proper functionality, it’s recommended not to use a caching solution. Otherwise, you may cache certain conditions and render them incorrectly.
Blocks can be rendered conditionally. This means that if a block meets certain conditions, it will be rendered in the card.
Every condition consists of the following three properties:
- Data (post ID, user role, date, dynamic data, etc.)
- Compare with (==, !=, >, <, >=, <=, in, not in, contains, before, after, etc.)
- Value (numeric, text, checkbox, option(s), etc.)
A condition can also include additional fields, for example, to select a facet to compare with a value.
Conditions accept both AND and OR logic to create advanced relationships between clauses. Within a set of conditions, an AND relation is applied, while between sets of conditions, an OR relation exists. This means that the block is rendered if at least one set of conditions is met.