You want to make sure your new block doesn't look out of place on the front end of your site. In this video, add the necessary CSS to your block template inline. That way, it’s included in both the front end and the block editor. This ensures that your block on the post edit screen looks exactly as it does on the front-end.
- [Instructor] Before we test out our block … on the WordPress Admin side, … there's one more thing that we need to do, … and that's make our block look good. … We're going to add a little bit of CSS … in line with our block template. … You can grab this CSS from the content-fun-facts.php file … in the exercise files. … We'll copy this, … and then we'll add it to our content-fun-facts.php file … in our child theme. … We're placing this CSS in line … so that it automatically gets included … in both the admin area, and on the front end … whenever our block is displayed, … and we're doing just a few things here. … In the fun-facts class … that is the wrapper for the entire block, … we're adding a simple background color, a border, … and some margin and paddings, … and then we're also adding a bottom border … for the heading four, … to separate it from the description. … So we'll save this file, … and then we'll go to our WordPress admin. … Here you can see the block editor, … and we've created a page called Fun Facts. …
- What are custom fields?
- Creating field groups
- Adding content to fields
- Displaying fields on a child theme
- Creating and displaying repeater fields
- Creating a submission form
- Creating a Gutenberg block with PHP only
- Writing rules for field display
- Organizing fields
- Exporting field groups
Skill Level Advanced
1. Getting Started with ACF
2. Creating Field Groups with ACF
Field types overview3m 48s
3. Displaying Your Fields
4. Working with Data in ACF
5. Creating a Gutenberg Block
6. Cleaning Up the Admin
Next steps1m 13s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.