ACF Relationship Block – Display your relations with flexibility.
Simplify the display of your ACF relationship fields with this intuitive Gutenberg block. Whether you need a grid layout for better visualization or a compact list for clarity, this block adapts to your needs.
Configure the rendering easily directly in the editor: switch between both modes with a single click, no code required. The block automatically retrieves all linked items via your ACF Relationship field and displays them according to your preference.
Compatible with all ACF content types, this block brings professionalism and flexibility to your WordPress site.
Enable the ACF relationship block
The ACF plugin is installed and active.
The EAC components plugin is installed and active.
In the dashboard select EAC components link, select the WordPress tab and enable the ACF relationship block option and save settings.
Create a relationship or Post object field
You need to know how to create a field group and associated fields, as well as how to define the rules for associating them with publications.
The widget support Relationship and Post object fields. Don’t forget to enable Featured Image option.
After creating the field group, select the location rules and save change.
You can also use the EAC Option pages to make your Relationship field global to your site and not attached to a particular publication.
To use Option Pages follow this link.
Select the relationship source
In the block editor, search for the EAC relationship block and drag and drop the icon into the preview panel.
In the Settings tab, Source section, select the relationship’s origin: either the current publication, another publication by its ID, especially if you have enabled ACF’s Option Pages or the author of the publication.
Then select the relationship from the list and you will see the list of available fields for each publication. You can then choose to display only those that will be published.
You can rearrange the order in which the fields are displayed. Move the cursor (using the arrow keys Left/Right) and type the first few letters of the corresponding field, then select it.
List of fields
Image, Title, Excerpt, Created date, Modified date, Author name, Author avatar, Categories, and Link (to the publication).
Configure the layout mode
From the Layout section, two display type are available.
– Grid mode, each row of the repeater is displayed in the traditional way with the fields aligned from top to bottom.
– List mode, the fields are displayed from left to right.
Then you must select the number of columns per row for each device (Responsive).
For the title, you must select its level ; DIV by default.
Configure image
Configure link
In the Link section apply the link to the title or globally to each item and enable nofollow to prevent the target of each link from being tracked and indexed by search engines.
Configure text alignment
All fields except images are positioned within a flexbox. Therefore, you must define their horizontal and vertical alignment by opening the settings context menu in the top bar.
Horizontal alignment supports RTL languages.
You can also define alternative grid width using the icon on the right.
Configure the spacing
In the Styles tab, under the Spacing section, you can define the gap between items that will adapt to all types of devices.
To do this, you must determine the lower and upper limits (Min and Max REM units) so that the block calculates the optimal gap relative to the viewport (320px to 1200px). The CSS formula (clamp) that will be used is located in the field Responsive Formula.
In addition, you will need to specify the top and bottom margins to be applied to the block, if applicable.
The padding is automatically calculated based on half the result of the Clamp formula.
Configure typography
In the Styles tab, under Typography section you can define a fluid font that adapts to all types of devices.
To do this, you must determine the lower and upper limits (Min and Max REM units) so that the block calculates the optimal font size relative to the viewport (320px to 1200px). The CSS formula (clamp) that will be used is located in the field Responsive Formula.
Other styles
Two other sections: Color, where you specify the background colors of the block, the background color of the items, and the text color; and Border item, to apply a predefined or custom style to each item.
Accessibility for ACF relationship block widget
Tab / Shift-Tab keyboard keys to navigate between links
Home keyboard key to move focus to the first link
End keyboard key to move focus to the last link
Escape keyboard key exit the grid
Enter / Space keyboard keys to activate a link.