How to implement an ACF (Advanced Custom Fields) block in Gutenberg for WordPress
Let’s create a simple FAQ (Frequently Asked Questions) section using Tailwind CSS with show/hide functionality. To achieve this, you can use a combination of HTML and JavaScript, and of course, Tailwind CSS for styling.
Here’s an example code snippet to get you started:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind FAQ</title> <!-- Include Tailwind CSS CDN --> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-gray-100 p-8"> <div class="max-w-md mx-auto"> <h1 class="text-3xl font-semibold mb-6">Frequently Asked Questions</h1> <!-- FAQ Section --> <div class="space-y-4"> <!-- Question 1 --> <div class="bg-white rounded-lg p-4 shadow-md"> <div class="flex justify-between items-center"> <h2 class="text-lg font-semibold">Q: What is Tailwind CSS?</h2> <button class="text-blue-500 focus:outline-none" onclick="toggleAnswer('answer1')">Show/Hide</button> </div> <div id="answer1" class="mt-4 hidden"> <p class="text-gray-600">A: Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build designs directly in your markup.</p> </div> </div> <!-- Question 2 --> <div class="bg-white rounded-lg p-4 shadow-md"> <div class="flex justify-between items-center"> <h2 class="text-lg font-semibold">Q: How can I install Tailwind CSS?</h2> <button class="text-blue-500 focus:outline-none" onclick="toggleAnswer('answer2')">Show/Hide</button> </div> <div id="answer2" class="mt-4 hidden"> <p class="text-gray-600">A: You can install Tailwind CSS using npm or yarn. Follow the installation guide provided in the official documentation.</p> </div> </div> <!-- Add more questions as needed --> </div> </div> <script> function toggleAnswer(answerId) { const answerElement = document.getElementById(answerId); answerElement.classList.toggle('hidden'); } </script> </body> </html>
This example uses Tailwind CSS for styling, and each FAQ item is a card with a question, answer, and a “Show/Hide” button. The JavaScript function toggleAnswer
is used to toggle the visibility of the answer when the button is clicked.
You can customize the content and add more questions by duplicating the FAQ card structure and updating the question and answer content accordingly.
To implement the FAQ as an ACF (Advanced Custom Fields) block in Gutenberg for WordPress, you’ll need to follow a few steps. Here’s a basic guide:
- Create an ACF Field Group:
- In the WordPress admin, go to “Custom Fields” -> “Field Groups” -> “Add New.”
- Add a new field group and add a “Repeater” field for your FAQ items.
- Inside the repeater, add a “Text” field for the question and a “WYSIWYG Editor” field for the answer.
- Save the field group.
- Create a New Block:
- In your theme or custom plugin, create a new file for your block, e.g.,
faq-block.php
.
- In your theme or custom plugin, create a new file for your block, e.g.,
- Register the ACF Block:
// faq-block.php function register_acf_block_types() { acf_register_block_type(array( 'name' => 'faq_block', 'title' => __('FAQ Block'), 'description' => __('A custom FAQ block.'), 'render_callback' => 'render_acf_faq_block', 'category' => 'common', 'icon' => 'admin-comments', 'keywords' => array('faq', 'block'), 'enqueue_assets' => function() { wp_enqueue_style('faq-block-style', 'path/to/your/faq-block.css'); }, )); } add_action('acf/init', 'register_acf_block_types');
Render Callback Function:
// faq-block.php function render_acf_faq_block($block) { $faq_items = get_field('faq_items', $block['id']); // Adjust the field name as per your ACF setup ?> <div class="max-w-md mx-auto"> <h1 class="text-3xl font-semibold mb-6">Frequently Asked Questions</h1> <div class="space-y-4"> <?php foreach ($faq_items as $item) : ?> <div class="bg-white rounded-lg p-4 shadow-md"> <div class="flex justify-between items-center"> <h2 class="text-lg font-semibold"><?php echo esc_html($item['question']); ?></h2> <button class="text-blue-500 focus:outline-none" onclick="toggleAnswer(this)">Show/Hide</button> </div> <div class="mt-4 hidden"> <?php echo apply_filters('the_content', $item['answer']); ?> </div> </div> <?php endforeach; ?> </div> </div> <?php }
- Enqueue the Block Styles: Create a CSS file (e.g.,
faq-block.css
) to include your Tailwind CSS styles and enqueue it in theenqueue_assets
callback. - Upload Your Block to WordPress: Upload the
faq-block.php
andfaq-block.css
files to your theme or plugin folder. - Add the Block to a Page/Post:
- Edit a page or post in WordPress.
- Add a new block and search for your custom block (
FAQ Block
). - Fill in the FAQ items using the ACF fields.
- Save and Preview: Save your changes and preview the page to see your FAQ block in action.
This example assumes you have a basic understanding of creating ACF fields, registering blocks, and enqueuing styles in WordPress. Adjust the code based on your ACF field group structure and styling requirements.
- Enqueue the Block Styles: Create a CSS file (e.g.,