https://github.com/shaileshdevs/gutenberg-blocks-using-acf
https://github.com/shaileshdevs/gutenberg-blocks-using-acf
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shaileshdevs/gutenberg-blocks-using-acf
- Owner: shaileshdevs
- License: gpl-2.0
- Created: 2023-05-27T11:51:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-27T12:21:08.000Z (about 2 years ago)
- Last Synced: 2025-02-07T18:51:48.716Z (4 months ago)
- Language: PHP
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Gutenberg Blocks Using Acf
## What does this plugin do?
This plugin demonstrates how the Gutenberg Blocks can be created using ACF plugin.
## The file structure
The plugin file structure is as follows:
- build
- testimonial (Gutenberg Block directory)
- block.json
- render.php
- style-index.css
- shailesh-gutenberg-blocks-using-acf.php
## To create Gutenberg Block
To create Guteberg Block, just create the directory inside the build directory. Your directory must contain the block.json and render.php files. You can also include CSS file and JS file in the directory. You should also define the path of the PHP, CSS and JS files in it.
## File Information
### block.json
- This file contains the metadata about the Gutenberg Block. To create Gutenberg Block using ACF, this file must contain the acf key in it.
### render.php
- This file is responsible to output the content on the frontend as well as on the backend editor.
- You can use the ACF function get_field in it. This function will retrieve the data corresponding to the current instance of your Gutenberg Block.
### style-index.css
- This file contains the CSS file. The CSS added in this file will be loaded on the frontend as well as on the backend.
### scripts.js
- This file contains the JS code.
## Useful Resources
- The Torquemag https://torquemag.io/2020/01/create-gutenberg-block-with-acf/
- The ACF function acf_register_block_type https://www.advancedcustomfields.com/resources/acf_register_block_type/
- The ACF block registration using block.json file https://www.advancedcustomfields.com/resources/acf-blocks-with-block-json/
- The WordPress block.json file https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/