Admin
Content Model

Create a custom block in Purple Hub

12min

Purple Hub



Summary

The document provides step-by-step instructions for creating a custom block on Purple Hub, adjusting alignment and adding a new field group on ACF, creating a new field in a form, and creating a custom block in WordPress. Screenshots and visual references are included throughout the guide. Once the block is created, it can be added to article content.



Preconditions

  • Have an Admin Role in Purple Hub


How-to guide

1. Go to your Purple Hub and click on 'Custom Block Types'

Click on 'Custom Block Types'


2. Click on 'Add Row'

Click on 'Add Row'


3. In the newly added row, in the column 'Unique name identifier' enter a name for your block e.g. "test-quote"

enter a name for your block


4. In the column 'Title' enter a title for your block e.g. "test-quote"

Enter a title for your block


5. In the column 'Category' enter the category for your block e.g. "sprylab"

Enter the category for your block


6. In the column 'Mode' select your preferred mode for the block to be displayed e.g. 'Preview'

Select your preferred mode for the block to be displayed


7. In the column 'Align' select your preferred Alignment for the block to be displayed e.g. 'Center'

Select your preferred Alignment for the block to be displayed


8. In the column 'Align Text' select your preferred Alignment for the text in the block to be displayed e.g. 'Left'

Select your preferred Alignment for the text in the block to be displayed


9. Click on 'Update'

Click on 'Update'


10. Click on 'ACF' in the main menu

Click on 'ACF' in the Main menu


11. Click on 'Field Groups'

Click on 'Field Groups'


12. Click on 'Add New'

Click on 'Add New'


13. Next to 'Add New Field Group' type a name for your field group in the text field e.g. "test-quote"

Type a name for your field group in the text field


14. Click on 'Add Field'

Click on 'Add Field'


15. Below 'Field Label' enter the desired label for the field e.g. "test-quote"

Enter the desired label for the field


16. Below 'Field Type' select your desired field type from the dropdown, e.g. 'Text'

Select your desired Field type from the dropdown


17. Go to 'Settings' -> 'Rules' and below 'Show this field group if' select 'Block' from the dropdown

Select 'block' from the dropdown


18. In the field right next to it, select 'is equal to' from the dropdown

Select 'is equal to' from the dropdown


19. In the field right next to it, select 'test-quote' from the dropdown

Select 'test-quote' from the dropdown


20. Click on 'Save Changes'

Click on 'Save Changes'


21. In the left-hand side menu bar, click on 'Purple Feed'

Click on 'Purple Feed'


22. Click on 'Articles'

Click on 'Articles'


23. Click on 'Add Article'

Click on 'Articles'


24. Click on '+' (Toggle block inserter)

Click on '+'


25. In the search field, type the name of the block you've just created, e.g. 'test'

Type the name of the block you've just created


26. As soon as your block appears, you can drag and drop it into your article

Drag and drop the block into your article


27. You can now use your customized block in your article content.

Use your customized block in your article content.