Fine tuning your site Custom blocks with ACF

Fine tuning your site: Custom blocks with ACF 🔗 **Source:** [Fine tuning your site: Custom blocks with ACF](https://www.youtube.com/watch?v=ACk6kb4YWBA) > [!note]+ Document Notes > tags: [wordpress, acf, custom-blocks, block-editor] > author: WP Engine > source: YouTube > reference: https://www.youtube.com/watch?v=ACk6kb4YWBA > date created: 2024-12-19 15:30 > > # 🏷️ Title: Fine tuning your site: Custom blocks with ACF >  ## 🧰 Action Inbox - [H1] Set up ACF field groups and register custom blocks in functions.php — Rob's hero block example 05:23 #wordpress - [H2] Create link wrapper block for clickable tile sections — demo at 18:45 #acf - [H3] Implement Ajax endpoints for third-party integrations — convertkit example 32:15 #development ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Advanced Custom Fields](https://advancedcustomfields.com) - [Frost Theme](https://wordpress.org/themes/frost/) - [WordPress Block Editor](https://wordpress.org/gutenberg/) ## 📝 Summary - Rob Stinson and Liam demonstrate building custom blocks with Advanced Custom Fields (ACF) at Decode 2024 - Four custom blocks showcased: hero block, link wrapper, course display, and convertkit integration - Educational site example demonstrates practical applications for content-rich websites - ACF provides developer control while simplifying editor experience for content creators - Custom blocks enable functionality not available in WordPress core like clickable tile sections ## 📖 Main Content Rob Stinson (WP Engine product marketer) and Liam (ACF senior engineer) present a comprehensive walkthrough of creating custom blocks using Advanced Custom Fields. They use a fictional educational site "The Steve Irwin Center for kids who can't wrestle crocs good" as their demonstration platform, built on the Frost theme. The session covers four distinct custom blocks, each addressing different use cases. The hero block demonstrates basic custom block setup with field groups, registration, and templating. The link wrapper block solves the common design need for clickable tile sections that WordPress core doesn't support. The course display block showcases ACF's post types feature with query loops. The convertkit integration block demonstrates Ajax functionality for third-party service integration. Key technical concepts include block scoped CSS (only loads when block is used), conditional logic for editor vs frontend behavior, inner blocks functionality, and maintaining security with server-side API handling. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=0) — Introduction and Context - Key idea: ACF custom blocks emerging as favorite feature in the plugin - Evidence: "Used on millions of sites across the internet and the feature set all around building custom blocks is emerging really as the favorite feature" #### ⏱️ [02:30](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=150) — Demo Site Overview - Key idea: Educational sites perfect for custom block demonstrations - Evidence: "Educational sites are perfect for this if you've ever built a college or university style website there's always something interesting happening" #### ⏱️ [04:15](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=255) — Why Build Custom Blocks - Key idea: Designer requirements and custom interactions drive custom block needs - Evidence: "You might be working with a really good designer and they the design has been really fine-tuned at the end of the day you can't do that with the off the shelf options" #### ⏱️ [05:23](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=323) — Hero Block Setup Process - Key idea: Custom blocks require field groups, registration, and file structure - Evidence: "You go about creating a field Group as you normally would... register our custom blocks... set up a couple directories or folders and files" #### ⏱️ [08:45](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=525) — Block Scoped CSS Benefits - Key idea: CSS only loads when block is used, improving performance - Evidence: "Any CSS that you place in here is scoped to this block... this CSS is only loaded on the front end if this block is loaded on the front end" #### ⏱️ [10:30](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=630) — Template Development - Key idea: Block templates follow familiar ACF PHP practices - Evidence: "If you've templated before with ACF this will look very very familiar... follows those really typical PHP and ACF development practices" #### ⏱️ [12:15](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=735) — Developer Control Benefits - Key idea: Custom blocks give developers control over editor options - Evidence: "As the web developer you can have better control over the options that are passed through to your editors and content creators" #### ⏱️ [15:30](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=930) — Link Wrapper Block Problem - Key idea: WordPress core can't make groups of blocks clickable - Evidence: "You can't actually do that with the core blocks within WordPress... you can't make a full group of blocks or anything like that actually clickable" #### ⏱️ [18:45](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=1125) — Conditional Logic for Editor - Key idea: Different behavior needed in editor vs frontend - Evidence: "If the page that this is being rendered on is not in the admin then please load the wrapping anchor tag" #### ⏱️ [20:15](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=1215) — Inner Blocks Feature - Key idea: Inner blocks allow adding any blocks within custom blocks - Evidence: "This little um super power um which is just this in blocks element which ACF gives us" #### ⏱️ [25:00](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=1500) — ACF Post Types Feature - Key idea: ACF now includes custom post type creation - Evidence: "This is a feature we shipped last year it's called post types and taxonomies" #### ⏱️ [27:30](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=1650) — Query Loop Integration - Key idea: ACF blocks work seamlessly with WordPress query loop - Evidence: "Course information tile is the ACF block... it actually has no Fields assigned to it because it doesn't need to" #### ⏱️ [30:45](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=1845) — Post ID Magic Variable - Key idea: Post ID variable enables context-aware field retrieval - Evidence: "Post ID in this is a magic variable that gets set in your template that changes as we Loop over each item" #### ⏱️ [32:15](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=1935) — Ajax Integration Setup - Key idea: Custom blocks can include Ajax endpoints for integrations - Evidence: "Providing two Ajax end points one for logged in users one for not logged in users" #### ⏱️ [35:30](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=2130) — Security Considerations - Key idea: Server-side processing protects API keys - Evidence: "We have to send the API key and we obviously need to keep that secret so we don't want our users to see that" ## 📚 References - [Advanced Custom Fields](https://advancedcustomfields.com) - [WordPress Block Development](https://developer.wordpress.org/block-editor/) - [Frost Theme](https://wordpress.org/themes/frost/) - [ConvertKit API](https://developers.convertkit.com/) ## 🗣️ Paraphrase - ACF custom blocks provide a developer-friendly way to create sophisticated WordPress blocks without requiring React knowledge, using familiar PHP templating and field management - The plugin bridges the gap between WordPress core limitations and custom design requirements by offering controlled editing experiences and advanced functionality like clickable sections - Integration capabilities extend beyond content management to include third-party services through Ajax endpoints while maintaining security best practices ## 📰 Newsletter **Level Up Your WordPress Development with ACF Custom Blocks** Ready to create more sophisticated WordPress sites? This Decode 2024 session shows how Advanced Custom Fields makes custom block development accessible without requiring React expertise. Key highlights include the link wrapper block solution for clickable tiles (something WordPress core can't do), seamless integration with query loops for dynamic content, and secure third-party API integration patterns. The performance benefits are notable too - block-scoped CSS only loads when needed, and the familiar PHP templating approach means faster development cycles for ACF users. **Resources**: [ACF Documentation](https://advancedcustomfields.com), [Block Development Guide](https://developer.wordpress.org/block-editor/), [WordPress Query Loop](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#query-loop) ## ✅ Action Items #### WordPress - Core: Review inner blocks API for consistency with ACF implementation - Design: Consider clickable group blocks feature request and HTML nesting concerns - Documentation: Create more examples of query loop with custom blocks integration - Performance: Document block-scoped CSS patterns for theme developers #### Community - Maintainers: Share patterns for secure Ajax endpoints in custom blocks - Contributors: Develop best practices guide for custom block file organization - Educators: Create curriculum combining ACF blocks with performance optimization ## 🧪 Hypotheses - Block-scoped CSS loading improves page performance compared to global stylesheets - ACF custom blocks reduce development time compared to native React block development - Inner blocks functionality increases block reusability across different contexts - Server-side Ajax processing provides better security than client-side API calls ### 📊 Methodology - Performance testing: Compare page load times with block-scoped vs global CSS - Developer survey: Time comparison between ACF blocks vs React block development - Security audit: Analyze Ajax endpoint implementations for vulnerability patterns ### ❓ Questions - How does block-scoped CSS impact caching strategies for high-traffic sites? - What are the performance implications of multiple ACF blocks with Ajax functionality? - How will ACF custom blocks evolve with WordPress full site editing features? ### 🔮 Future Research - Integration patterns between ACF blocks and WordPress site editor - Performance optimization strategies for complex ACF block implementations - Security best practices for custom block third-party integrations ### 💡 Implications - Practice: ACF provides viable alternative to React-based block development - Policy: Custom block security requires server-side Ajax endpoint management - Education: PHP developers can create sophisticated blocks without learning React - Performance: Block-scoped assets offer significant optimization opportunities ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: Code examples, file structure diagrams, editor screenshots - Improve: Add architecture diagrams showing block registration flow #### 🔊 Aural learners - Present: Video presentation with clear narration - Improve: Add audio summary of key implementation steps #### 🗣️ Verbal learners - Present: Clear explanations of technical concepts, analogies to familiar patterns - Improve: Glossary of ACF-specific terminology #### 🧩 Kinesthetic learners - Present: Step-by-step code examples, hands-on demonstrations - Improve: Downloadable starter templates and exercises #### 🧠 Logical learners - Present: Sequential development process, cause-and-effect relationships - Improve: Decision tree for when to use custom blocks vs core blocks #### 🧑‍🤝‍🧑 Social learners - Present: Conference presentation format, collaborative examples - Improve: Community challenges and peer code review opportunities #### 🧘‍♀️ Solitary learners - Present: Comprehensive code examples for independent study - Improve: Self-assessment checklist and troubleshooting guide #### 🌿 Naturalistic learners - Present: Real-world educational site example - Improve: More diverse industry use cases and applications ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure in presentation - Improve: Add ARIA labels to code examples, alt text for diagrams #### Keyboard navigation - Present: Standard video controls - Improve: Keyboard shortcuts for code section navigation #### Contrast and readability - Present: High contrast code examples - Improve: Ensure code syntax highlighting meets WCAG standards #### Text resizing and reflow - Present: Responsive video player - Improve: Ensure code blocks remain readable at 200% zoom #### Media and captions - Present: Video content with transcript - Improve: Add synchronized captions and downloadable transcript #### Forms and interactions - Present: Clear form examples in demos - Improve: Document accessibility considerations for custom block forms ### 🌍 DEIB Assessment #### Cultural breadth - Present: Australian presenters sharing global development practices - Improve: Include diverse developer perspectives and use cases #### Inclusive language - Present: Technical terms explained clearly - Improve: Avoid cultural references that may not translate globally #### Neurodiversity support - Present: Clear section structure and consistent pacing - Improve: Add content outline and progress indicators #### Representation - Present: Technical content accessible to different skill levels - Improve: Include diverse project examples beyond educational sites #### Psychological safety - Present: Encouraging tone about learning new skills - Improve: Emphasize that all experience levels are welcome ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Clear cause-effect between ACF setup and block functionality - Inductive strength: Multiple examples support general ACF block principles - Causal reasoning: Demonstrates how field groups enable block customization - Analogical strength: Compares ACF templating to familiar PHP patterns #### Fallacies - Appeal to authority: Relies on WP Engine/ACF team credibility without independent verification - Hasty generalization: Limited examples may not represent all use cases #### Tone of voice - Overall tone: Professional and educational with conversational elements, appropriate for developer audience ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: No attacks on competing solutions - Reverse victim/offender: No victim/offender dynamics - Emotional cues: Positive enthusiasm about ACF capabilities, appropriate for product demonstration ## 🎯 Conclusion ACF custom blocks provide a powerful middle ground between WordPress core limitations and complex React development, enabling developers to create sophisticated functionality while maintaining performance and security best practices. The demonstrated patterns for clickable sections, dynamic content display, and third-party integrations offer practical solutions for common development challenges. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] ACF custom blocks provide developer control over editor options > [!quote] [Fine tuning your site: Custom blocks with ACF](https://www.youtube.com/watch?v=ACk6kb4YWBA) by [[WP Engine]] via [[YouTube]]. Published 2024. Accessed 2024-12-19. > "As the web developer you can have better control over the options that are passed through to your editors and content creators" Demonstrates how custom blocks enable selective feature exposure to content creators while maintaining design integrity. [view highlight](https://www.youtube.com/watch?v=ACk6kb4YWBA?t=735) #wordpress #acf #articleseed ID:rw_acf_control ### [H2]