How to - ACF Repeater Block in WordPress Gutenberg - Cwicly

hi guys autumn is from the quickly team here in this video i'm going to show you how to create your own repeater from scratch this is a great tool to quickly set up dynamic elements that you need to repeat and while personalizing from a to z plus it's relatively simple this repeater feature is achieved thanks to acf pro which is included for free in the quickly plugin so let's get started as an example i will be creating a repeater design for travel reservations a repeater is basically a list of items such as text images links buttons that have the same design and layout but that have a different content that is individually customizable this is a great way of organizing your content and means that you can quickly change items without having to tweak your design over and over again saving you a lot of time and a lot of money before getting into designing the repeater let me first create the list of items i want to appear in my repeater in the wordpress dashboard i will navigate to the custom fields menu and add a new field group to start my list of items i add a field and make sure to set its type to repeater for my design example i wish to have an image a price a title a description a button and a url for the button so i will add all these items in the subfields for the image remember to ask acf pro to return a url and not an array if you want to get creative and go into detail acf pro offers many different options and conditions for every type of item once my list complete i can now start designing the layout by adding a new post in a section i will first choose the oswald font in the typography panel of the advanced tab this means that the font will be applied to all its child elements without me needing to apply it every time i want my elements to be stacked upon each other and in the center so in the primary tab i will pick column as a direction and center for align and justify i will add a header block a paragraph block a repeater block and a button block for the header i will go for a purple color for text color 500 pixels font weight 60 pixels font size 5 pixel spacing align center and capitalize every letter for the paragraph block i will give my text 500 pixels font weight 20 pixels font size 0.5 pixels spacing and align center and capitalize the first letters i will also add an upper margin of 25 pixels and a lower margin of 100 pixels to space my items out the repeater won't activate until i add some items so let's do that let's update and refresh the page to start adding these fields so let's select the repeater block repeaters allow you to choose between several layout modes for this example i'm going to go with columns based on a css grid so in the layout panel i can decide the number of columns i need i want 4 in this case with a row gap and column gap of 45 pixels this is if i have more than 4 items and i want them to be equally spaced out on top of each other and i will navigate to the edit grid option and add a fraction in the advanced tab in the container sizing panel let's give the repeater width of 100 to make sure it takes the whole space now back in the primary tab i will select my acf group and acf field but i created earlier in the video it's normal if nothing appears i simply have to add the containers that will hold my list items i will first add a div that will contain all my elements and i will select column as a direction and center for align and justify so that my elements are centered i will then add a div that will contain my image and inside that div i will add a paragraph that will contain my price as you can see when i add these blocks to this first item quickly automatically repeats the structure and design on the other blocks so you only have to modify one block to have the change replicated throughout your repeated blocks selecting the picture div block i will choose column as a direction flex end for a line and flex start for justify this is for my pricing paragraph to be correctly placed on the top right of the picture div to add my image let's navigate to the advanced tab in the background panel and select image as the background type i will select a dynamic image source instead of a static one since we want to use the images we added in the repeater fields i will choose repeat as the source and image as repeater field my image is quite small so i will navigate to the advanced tab and container sizing panel and give my diva height at 350 pixels and a width of 100 percent back in the background panel i will select cover to make the image fit the container and 50 left and top to center the image i will also give my div a border radius of 15 pixels now let's link my paragraph to the repeater by going to the toolbar and selecting the dynamic values icon choosing repeat as the dynamic value and price as the repeater field then i will give it a purple text color a font weight of 500 pixels a font size of 15 pixels and a spacing of 1 pixel i will also give it a white background color a padding of 10 pixels on top and bottom and 15 pixels right and left and a border radius of 4 pixels i will choose my picture div and navigate to the advanced tab in the margin and padding panel where i will add a padding of 25 pixels to make the price paragraph breathe a little i will add the title by adding a paragraph and linking it as i did for the pricing paragraph except that now i will choose the title as the repeater field my title will have a font weight of 600 pixels a font size of 30 pixels and a spacing of 1.5 pixels i will align it in the center and capitalize every character to separate it from the picture div i will unlick my margin and give it a 30 pixel margin from the top we will move on to the number of days and nights by adding a paragraph again linking it to the repeater i will give this text a font weight of 400 pixels a 15 pixel font size a 1.5 pixel spacing and the line center i will also unlink the margin in the advanced tab to separate the top with a 10 pixel margin and separate the bottom with a 30 pixel margin the last item to be added is a button that i will link with the dynamic values icon i will define the button as a link and navigate to edit link make the source dynamic choose acf repeater for data and url for the repeater field now when users click on the button they will be redirected to the url you specified let's shape the button by giving it a purple background color a white text color and a padding of 20 pixels i will round the borders a little by giving a 5 pixel border radius to spice the button up i will go to hover mode give a zero percent opacity to the background color and make the text color purple if i go back to normal mode i can make the transition smoother by going to the effects panel in the advanced tab and in the transitions panel make the duration 0.4 seconds all that's missing now is the shaping of the final button that i added earlier in the video i will first define my button as a link then i will give the text a purple color a font weight of 500 pixels a 20 pixel font size 1.5 pixel spacing align center and capitalize every letter as for the borders i will choose a 5 pixel border radius and a solid style to make the button breathe a little i will give a margin of 20 pixels and separate it from the repeater by unlinking the margin and giving it a 100 pixel upper margin as for the previous button i will give it a hover effect by navigating to hover mode adding a purple background color and making the text color white i will choose a purple watercolor in the border panel now back to normal mode i will make the transition smoother like i did for the previous button lastly i need my layout to be correctly visualized on other devices so i will select my repeater block and navigate to tablet view as my four repeated blocks do not fit in tablet view in the layout panel i will select two columns navigate to edit grid layout and delete the third column now we will see what the layout looks like in mobile view as you can see two columns don't fit anymore so i will select one column and in the edit grid layout i will delete the second and third column my layout is now user-friendly for all devices there you go we have created a repeater and if you wish to modify any element all you need to do is navigate to the repeater list and modify your element there remember you only need to modify one block to have those changes applied to every other repeated block i hope you enjoyed creating this repeater with me and i hope to see you very soon bye

Channel: Cwicly

Views: 985

Keywords: pricing, table, wordpress, gutenberg, fse, acf, repeater

Id: jg0mnXMwF0w

Length: 11min 2sec (662 seconds)

Published: Tue Nov 16 2021