How I Built It: Related Posts Block  🔗 **Source:** [How I Built It: Related Posts Block](https://jacobmartella.me/web-development/block-editor/how-i-built-it-related-posts-block/) > [!note]+ Document Notes > tags: [wordpress-blocks, related-posts, gutenberg-development] > author: Jacob Martella > source: jacobmartella.me > reference: https://jacobmartella.me/web-development/block-editor/how-i-built-it-related-posts-block/ > date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} > > # 🏷️ Title: How I Built It: Related Posts Block > <!-- deep-read:sections start --> ## 🧭 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) ## 📝 Summary - Jacob Martella built a Related Posts block for the Crosswinds Blocks plugin because WordPress core doesn't include this functionality. - The project involved studying the Query Loop and Post Template blocks from Gutenberg core for inspiration. - The solution provides customizable related post display with grid options and works across all post types. - Implementation required both editor-side React components and front-end PHP templating. - The block now supports custom taxonomies per post type through plugin settings. ## 📖 Main Content Jacob Martella created a Related Posts block to solve the gap in WordPress core block functionality. Related posts help retain website visitors by suggesting relevant content, but this feature isn't available as a core block or easily achievable with the Query Loop block. ### Technical Implementation Approach The development process involved two main phases: **Editor Implementation**: Martella studied the post template block in the Gutenberg repository to understand React patterns like `memo` and complex state management. He adapted this code for the Related Posts block, adding inspector controls for post count and column layout. **Front-end Rendering**: The PHP template adapted the Single Content block's approach, modifying the query to pull related posts based on current post tags in random order. CSS classes handle the responsive grid layout. ### Post Type Extension Initially limited to posts, version 1.1 expanded support to all post types. This required creating a settings interface where users can map taxonomies to post types, since different content types use different taxonomies for relationships. The block queries posts from the same post type using the configured taxonomy terms from the current post, ensuring relevant suggestions across custom post types. ## 🗒️ Notes - WordPress core deliberately excludes related posts functionality, placing it in plugin territory - The Query Loop block cannot easily replicate related post functionality - React components like `memo` were initially challenging but became clearer with experience - Copy-paste approach from core blocks provided a working foundation - Custom taxonomy mapping solved the multi-post-type challenge - Grid layout uses CSS classes with configurable column counts - Random ordering prevents repetitive suggestions ## 📚 References - [Crosswinds Blocks plugin](https://jacobmartella.me) - [Gutenberg GitHub repository](https://github.com/WordPress/gutenberg) - [WordPress Query Loop block documentation](https://wordpress.org/documentation/) ## 🗣️ Paraphrase A WordPress developer needed related posts functionality for block themes but found no core solution. He studied how WordPress's post template block works in React, then adapted that pattern to create a custom Related Posts block. The initial version worked for blog posts only, querying by tags. Later updates added support for all post types by letting users configure which taxonomy to use per content type. The solution combines React for the editor experience with PHP for front-end rendering, providing grid layout options and random post ordering. ## 📰 Newsletter **Building Custom WordPress Blocks: Related Posts Edition** Missing related posts in your block theme? Jacob Martella's journey building a Related Posts block for the Crosswinds Blocks plugin offers valuable insights for WordPress developers. He dove deep into Gutenberg's post template block source code, learned React patterns like `memo`, and created a fully customizable solution. The block supports grid layouts, custom post types, and configurable taxonomies—filling a gap that core WordPress intentionally leaves to plugins. Perfect reading for anyone building custom blocks or wondering why some "obvious" features aren't in core. [Read the full breakdown](https://jacobmartella.me/web-development/block-editor/how-i-built-it-related-posts-block/) and check out the [Crosswinds Blocks plugin](https://jacobmartella.me) for implementation examples. ## ✅ Action Items #### WordPress - **Core**: N/A - Related posts deliberately excluded from core - **Plugins**: Document patterns for related content blocks in developer handbook - **Community**: Create block development workshops focusing on Query Loop extensions #### DevRel - Developer education: Workshop on adapting core block patterns for custom use cases - Documentation: Create guides for reading and understanding Gutenberg source code - Community engagement: Showcase community block development success stories #### Community - Contributors: Develop block development mentorship for intermediate React patterns - Maintainers: Create reusable patterns for common block functionality gaps ## 🧪 Hypotheses - Related posts blocks improve user engagement and session duration on WordPress sites - Copying core block patterns provides more stable foundations than building from scratch - Custom taxonomy mapping is essential for related content across different post types - Developer comfort with React correlates with successful custom block development ### 📊 Methodology - A/B testing related posts vs. no related posts for engagement metrics - Developer surveys on block development learning paths and pain points - Performance analysis of query-based blocks on large content sites ### ❓ Questions - How do related posts impact actual user behavior versus perceived engagement? - What's the optimal number of related posts for different content types? - Should WordPress core reconsider including basic related posts functionality? ### 🔮 Future Research - Machine learning approaches for better content relationship detection - Performance optimization for related content queries at scale - User experience patterns for related content display across devices ### 💡 Implications - **Practice**: Custom blocks can fill core functionality gaps effectively - **Education**: Reading core code is valuable for intermediate block developers - **Plugin development**: Settings screens enable flexible block behavior across use cases ### 🧠 Learning Styles Assessment Reading level: College level (technical implementation details, React terminology) #### 👀 Visual learners - Present: Code structure descriptions, grid layout concepts - Improve: Flowcharts of query logic, before/after block editor screenshots #### 🔊 Aural learners - Present: Written walkthrough of development process - Improve: Screencast of block development process, code explanation videos #### 🗣️ Verbal learners - Present: Clear explanations of React concepts, step-by-step process - Improve: Glossary of technical terms, analogies for complex concepts #### 🧩 Kinesthetic learners - Present: Implementation steps, hands-on development approach - Improve: Interactive code sandbox, step-by-step tutorial with checkpoints ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive text - Improve: Code examples need better alt descriptions #### Keyboard navigation - Present: Standard blog post navigation - Improve: Skip links for code sections ### 🌍 DEIB Assessment #### Cultural breadth - Present: English-only content, US-centric examples - Improve: Multi-language block examples, global use cases #### Inclusive language - Present: Technical but accessible language - Improve: Define React/WordPress jargon consistently ### ✅ Logical Validity #### Strong reasoning - **Problem identification**: Clear gap in WordPress core functionality - **Solution approach**: Logical progression from studying existing patterns - **Implementation strategy**: Sensible division between editor and front-end concerns #### Tone of voice Conversational and honest, acknowledging learning challenges and imperfect approaches ("I'm going to be completely honest"). ### 🛡️ DARVO Analysis No DARVO patterns present - straightforward technical development narrative. ## 🎯 Conclusion Martella's Related Posts block demonstrates effective custom WordPress block development by studying and adapting core patterns. The project successfully fills a functionality gap while providing insights into React-based block development and the importance of flexible configuration for diverse use cases. ## 🔄 Refactor Appendix — How I Built It: Related Posts Block ### 📚 Literature Atoms (H3) #### Related posts functionality deliberately excluded from WordPress core > [!quote] ID:rw_001 > Nor should it be in WordPress core. It's something that is pretty clearly in plugin territory, in my opinion. **Context & use**: - Author's rationale for building custom solution - Illustrates WordPress philosophy of core minimalism vs plugin ecosystem **Tags**: #xref <!-- atomicity: 1 idea ✓ --> #### Studying core block patterns provides implementation foundation > [!quote] ID:rw_002 > I basically took what the post template block is doing and put it into the edit.js file for the Related Posts block. **Context & use**: - Practical development approach for custom blocks - Demonstrates value of understanding existing Gutenberg patterns **Tags**: #xref <!-- atomicity: 1 idea ✓ --> #### Custom taxonomy mapping enables related content across post types > [!quote] ID:rw_003 > I ended up adding in settings to the plugin's settings screen where a user could choose what taxonomy would be used for the block for each post type. **Context & use**: - Solution for multi-post-type support in related content features - Shows importance of configuration flexibility in block development **Tags**: #articleseed <!-- atomicity: 1 idea ✓ --> ### 🧠 Permanent Candidates (H4) #### WordPress core deliberately maintains minimal scope **Claim**: WordPress core intentionally excludes common features like related posts to maintain simplicity and encourage plugin ecosystem growth. **Evidence pointer**: [[#Related posts functionality deliberately excluded from WordPress core]] **Scope & conditions**: Applies to features that are useful but not essential for basic content management **Links**: - [[WordPress plugin ecosystem]] — because evidence-for - [[Core minimalism philosophy]] — because extends <!-- atomicity: 1 idea ✓ --> ### ✏️ Fleeting Queue - Research WordPress core inclusion criteria and decision-making process #fleeting #inbox - Investigate performance impact of related posts queries on large sites #fleeting #inbox ### → Things 3 - [ ] Test Crosswinds Blocks plugin for block development learning #things - [ ] Document React patterns from Gutenberg core for future reference #things <!-- deep-read:sections end --> 📄 **Full text:** ![[Full Document Contents/Articles/How I Built It Related Posts Block.md|How I Built It: Related Posts Block by Jacob Martella]] ## Highlights - Nor should it be in WordPress core. It’s something that is pretty clearly in plugin territory, in my opinion. ([View Highlight](https://read.readwise.io/read/01ksqd5d2jhpdnx6mh4mm02tjy)) - Note: Mike Schinkel on the core/plugin boundary: related-posts is "pretty clearly in plugin territory" — the core/plugin scope debate in one sentence. - Tags: core-vs-plugins, atom/literature/h2, wordpress-blocks