How to Create a Reusable WordPress Component with JetEngine 🔗 **Source:** [How to Create a Reusable WordPress Component with JetEngine](https://www.youtube.com/watch?v=_yL9lbiSGyE) > [!note]+ Document Notes > tags: > - #WordPress > - #JetEngine > - #BricksBuilder > Author: Presenter not explicitly identified in the video transcript > Source: YouTube (tutorial video) > Reference: https://www.youtube.com/watch?v=_yL9lbiSGyE > date created: 2025-08-20 12:00 > > # 🧱 Title: Reusable Components with JetEngine (Elementor + Bricks) — From Controls to Query Loops > <!-- 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) - [🔍 SEO Evaluation](#-seo-evaluation) - [🎯 Conclusion](#-conclusion) ### 📚 References: Include a list of sources consulted and cited in the article. ## 📝 Summary: - 🔹 The video shows how to build **reusable JetEngine components** and then reuse them across pages and templates in **Elementor** and **Bricks**. - 🔹 You define **content controls** (text, select, media, etc.) and **style controls** (colors, overlays), bind them to widgets via **dynamic tags**, and drop the component in different contexts. - 🔹 In **Bricks**, you configure controls in JetEngine’s settings, then use the component inside a **query loop** to display related data (e.g., doctors ↔ services). - 🔹 The core payoff: **build once, reuse everywhere**, while keeping per-instance adjustments easy. ## 📖 Main Content: - 🔹 **What is a JetEngine component?** ([0:10–0:50](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=10)) - 🔸 A partially preconfigured template usable across pages, listings, or singles; perfect for CTAs, headers, pop-ups. - 🔹 **Elementor flow: create + bind** ([1:05–5:07](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=65)) - 🔸 Create a component, set the **editor** to Elementor. - 🔸 Add **content controls**: CTA title, text area, image, button label (select), and button link. - 🔸 Bind controls to widgets via **dynamic tags** (e.g., Heading → Component Control Value). - 🔹 **Style controls** ([6:19–8:15](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=379)) - 🔸 Define color controls (text, overlay gradient parts, button). - 🔸 Assign those to element styles via **Component Control Color**. - 🔹 **Reuse on static and dynamic pages** ([8:20–11:11](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=500)) - 🔸 Drop the component on the homepage and fill **static** values. - 🔸 On single service templates, switch fields to **dynamic** sources (post title, custom fields, featured image). - 🔹 **Bricks flow + query loop** ([11:24–16:18](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=684)) - 🔸 Create a Bricks-view component but set **controls** from JetEngine’s settings UI. - 🔸 Use **Query Loop** in Bricks to repeat containers for doctor posts; add dynamic fields and a dynamic image. - 🔸 Insert the component and change **context** to a **related items** relation (services → doctors) so the component shows service data per doctor. - 🔸 Configure flex grid (row, wrap) for responsive multi-column listings. ### 🗒️ Notes - 🔹 **Components vs Listings** ([0:26–0:45](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=26)) - 🔸 Components can live outside loops; listings are loop-centric. - 🔸 Use components for repeatable UI chunks you want everywhere. - 🔹 **Control types & defaults** ([2:36–3:14](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=156)) - 🔸 Text, Text Area, Rich Text, Select, Single Media. - 🔸 Defaults fill placeholders when values are missing. - 🔹 **Dynamic bindings in Elementor** ([4:31–5:07](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=271)) - 🔸 Heading widget → Component Control Value → `CTA title`. - 🔸 Text Editor → `CTA text`; Dynamic Link → `button link` and `button text`. - 🔹 **Background image via control** ([5:50–6:09](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=350)) - 🔸 Use container background image → dynamic source → `CTA image`. - 🔹 **Style controls mapped** ([7:31–8:07](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=451)) - 🔸 Text color control bound to headings and body text. - 🔸 Button color control bound to the dynamic link widget. - 🔸 Overlay gradient colors bound to container overlay. - 🔹 **Static reuse on homepage** ([8:30–9:24](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=510)) - 🔸 Fill content controls directly; choose button variant via **Select**. - 🔹 **Dynamic reuse on singles** ([9:39–11:11](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=579)) - 🔸 Title from **Current Object Field → Post Title** with prefix/suffix. - 🔸 Description from **JetEngine custom field**; image from **Post Thumbnail**. - 🔹 **Bricks component configuration** ([12:06–13:26](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=726)) - 🔸 Define two controls: service title, service description. - 🔸 Bind in Bricks via dynamic data picker (labels match control names). - 🔹 **Query Loop + related context** ([13:31–15:36](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=811)) - 🔸 Activate **Query Loop**; pick **JetEngine Query Builder → doctors query**. - 🔸 Change component **context** to “related items from services to doctors.” - 🔸 Map service fields; grid with flex wrap for columns. - 🔹 **Tone & bias** - 🔸 Tone: calm, practical, instructive. - 🔸 Mild bias toward Elementor’s ease-of-use claim; Bricks noted as different process, not inferior. ## 📚 References: - 🔹 Video: *How to Create a Reusable WordPress Component with JetEngine* — https://www.youtube.com/watch?v=_yL9lbiSGyE - 🔹 JetEngine (Crocoblock) product page — https://crocoblock.com - 🔹 Bricks Builder — https://bricksbuilder.io - 🔹 WordPress dynamic data concepts — https://developer.wordpress.org/themes/basics/the-loop/ ## 🗣️ Paraphrase: - 🔹 **Defining and binding controls** ([2:00–5:07](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=120)) - 🔸 Original idea: Set up content and style controls, then attach them to widgets via dynamic tags so a single component can adapt per use. - 🔸 Paraphrase: Create named knobs for text, media, and colors, and wire those knobs into widgets. Later, twist the knobs per page instead of rebuilding the UI. - 🔹 **Bricks + related context** ([13:31–15:36](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=811)) - 🔸 Original idea: Put the component inside a query loop and switch its context to a post relation to show the right service data per doctor. - 🔸 Paraphrase: Repeat a layout for each doctor, then point the component’s data lens at “their” services. The loop handles repetition; context picks the right source. ## 📰 Newsletter: - 🔹 **Build once, reuse everywhere.** JetEngine components let you prewire content and color controls, then drop the same CTA across Elementor pages and Bricks templates. - 🔹 **Elementor:** Bind controls with dynamic tags; swap copy and images in seconds. - 🔹 **Bricks:** Add the component inside a **Query Loop** and switch context to show related data (e.g., doctors ↔ services). - 🔹 **Try it:** Video tutorial → https://www.youtube.com/watch?v=_yL9lbiSGyE • JetEngine → https://crocoblock.com • Bricks → https://bricksbuilder.io - 🔹 **Community notes:** Share component patterns for healthcare, education, and events. Reuse beats rebuild. ## ✅ Action Items: - 🔹 **Reusable prompt (aligned to open-source advocacy, contributor engagement, education, and OSPO goals):** - 🔸 “For the attached resource, extract how its techniques support **reusable design systems** in WordPress. Map to: (1) **onboarding** materials for new contributors, (2) **transparency** practices (naming, versioning, docs), (3) **education** artifacts for Learn.WordPress.org, (4) **sustainability** via reuse and fewer one-off templates, (5) **OSPO** policy fit: component governance, review checklists, and deprecation guidance. Output: TL;DR, teaching outline, contributor tasks, sample rubric, KPIs, DEIB notes, and risk mitigations.” - 🔹 **Programmatic next steps:** - 🔸 Build a **Component Library** repo (Elementor + Bricks examples) with a **controls schema** and **usage notes**. - 🔸 Publish a **Learn WordPress** lesson: “JetEngine Components 101 + Context Switching in Bricks Query Loops.” - 🔸 Draft an **OSPO-style guideline**: naming conventions, control types, context rules, and changelog templates. - 🔸 Add **CI checks** for component JSON validity and control-name collisions. - 🔸 Track KPIs: build time saved, defect rate after reuse, and content-editor satisfaction. ## 🧪 Hypotheses: - 🔹 H1: A shared component library reduces new page build time by **≥35%** across teams. - 🔹 H2: Standardized control names increase editor adoption and reduce support tickets by **≥25%**. - 🔹 H3: Using related-context patterns in Bricks improves content accuracy on multisite catalogs by **≥20%**. ### 📊 Methodology: - 🔹 **Design:** A/B teams (library vs ad hoc) over 8 weeks; measure build time and post-launch fixes. - 🔹 **Data sources:** Git commits, PR review notes, GA4 events (component insertions), support tickets, editor surveys. - 🔹 **Analysis:** Mann–Whitney for time distributions; chi-square on defect counts; thematic coding on editor feedback. ### ❓ Questions: - 🔹 Which **minimal set of controls** covers 80% of CTA use cases? - 🔹 How should we version components to balance **stability** with **iteration**? - 🔹 What’s the best practice for **context switching** when relations are many-to-many? ### 🔮 Future Research: - 🔹 Build a **control-linter** that flags unclear labels, missing defaults, and non-semantic names. - 🔹 Explore **access-control** for who can edit style vs content controls in large teams. - 🔹 Compare **performance** of component-heavy pages across builders. ### 💡 Implications: - 🔹 Strong component governance reduces rework and keeps brand/UI consistent. - 🔹 Education + standards lower the barrier for first-time contributors and content editors. ### 🧠 Learning Styles Assessment: - 🔹 **Readability score (approx.):** Grade **9–10** conversational technical style. 1. **Visual (Spatial)** - 🔹 Present: On-screen UI steps; implicit visuals. - 🔹 Improve: Add flowcharts for control binding and context graphs for relations. 2. **Aural (Auditory-Musical)** - 🔹 Present: Narration throughout. - 🔹 Improve: Provide a brief audio summary + chapter markers. 3. **Verbal (Linguistic)** - 🔹 Present: Clear labels and step lists. - 🔹 Improve: Glossary for “context,” “related items,” and “query loop.” 4. **Physical (Kinesthetic)** - 🔹 Present: Guided clicks; reproducible steps. - 🔹 Improve: Downloadable sandbox with exercise tasks and checkpoints. 5. **Logical (Mathematical)** - 🔹 Present: Control → widget → output chain. - 🔹 Improve: Decision tree for when to use **Select** vs **Text** controls, and when to switch context. 6. **Social (Interpersonal)** - 🔹 Present: Solo tutorial. - 🔹 Improve: Add forum thread or Slack channel for pattern sharing. 7. **Solitary (Intrapersonal)** - 🔹 Present: Transcript suits self-paced study. - 🔹 Improve: Reflection prompts: “Name three controls your CTA needs and why.” 8. **Naturalistic** - 🔹 Present: None. - 🔹 Improve: N/A for this topic. ### 📊 Accessibility Assessment: - 🔹 **Screen Reader Compatibility:** - 🔸 Ensure headings are semantic; label dynamic controls and images; include alt text for example screenshots. - 🔹 **Keyboard Navigation:** - 🔸 Verify all control fields, color pickers, and dynamic-tag pickers are keyboard reachable; visible focus states required. - 🔹 **Contrast & Readability:** - 🔸 Meet **WCAG 2.2 AA** for text and UI elements; avoid low-contrast overlays on images. - 🔹 **Text Resizing:** - 🔸 Confirm layouts remain usable at 200–400% zoom; allow line wrapping in long labels. ### 🌍 DEIB (Diversity, Equity, Inclusion, and Belonging) Assessment: - 🔹 **Cultural Relevance:** - 🔸 Example set is healthcare; add examples from nonprofit, education, and small business. - 🔹 **Inclusive Language:** - 🔸 Mostly neutral; define jargon terms for non-native English speakers. - 🔹 **Neurodiversity Support:** - 🔸 Chunk tasks; provide checklists and end-of-section summaries. - 🔹 **Representation:** - 🔸 Invite community-submitted components from diverse teams and regions. - 🔹 **Psychological Safety:** - 🔸 Encourage experimentation; show how to revert safely; provide clear error recovery steps. ### 🧮 Logical validity: - 🔹 **Sound reasoning present** - 🔸 *Causal reasoning* ([1:05–5:07](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=65)): Define controls → bind to widgets → component becomes reusable. This sequence is coherent and repeatable. - 🔸 *Balanced view* ([11:24–12:06](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=684)): Acknowledges Bricks uses a different flow; demonstrates parity via query loops. - 🔸 *Appeal to evidence (procedural)*: Steps are demonstrated live with working outputs. - 🔹 **Potential fallacies or weak spots** - 🔸 *Hasty generalization* ([1:20–1:26](https://www.youtube.com/watch?v=_yL9lbiSGyE&t=80)): “Elementor offers the quickest way” is context-dependent; not universally true. - 💡 Improve: Provide timing metrics or criteria (steps count, clicks, learning curve). - 🔸 *Appeal to authority* (implicit brand trust): Assumes JetEngine/Bricks are “smooth” without comparing rivals. - 💡 Improve: Add a short matrix comparing ACF Blocks, native patterns, or other builders. - 🔹 **Tone of voice:** Calm, instructional, pragmatic; light marketing phrasing yet mostly task-focused. ## 🛡️ DARVO Analysis: - 🔹 **Deny:** None. The tutorial does not dismiss issues; it acknowledges limitations (Bricks config differs) and demonstrates fixes. - 🔹 **Attack:** None. No negative framing of tools or users. - 🔹 **Reverse Victim and Offender:** None. No attempt to claim unfair treatment or shift blame. - 🔹 **Notes:** The rhetoric is **supportive**, process-oriented, and free of DARVO tactics. ### 🔍 SEO Evaluation: 1. **Keywords** - 🔹 Present: “JetEngine components,” “Elementor,” “Bricks,” “query loop,” “dynamic tags.” - 🔹 Improve: Add long-tails like “JetEngine component controls,” “Bricks related items context,” “Elementor dynamic CTA.” 2. **Meta Description** - 🔹 Include a 150–160 char summary: “Build reusable JetEngine components in Elementor and Bricks, bind dynamic controls, and show related data in Bricks query loops.” 3. **Title Tag** - 🔹 Keep ≤60 chars, include “JetEngine,” “Elementor,” “Bricks.” 4. **Headers** - 🔹 Use H2/H3 for “Create controls,” “Bind to widgets,” “Bricks query loop,” “Related context.” 5. **Content Length** - 🔹 Target 1,200–1,800 words for written companion guide with step screenshots. 6. **Internal/External Links** - 🔹 Internal: Related tutorials on CPTs, relations, and dynamic fields. - 🔹 External: Link to official JetEngine and Bricks docs pages used. 7. **URL Structure** - 🔹 Short slug: `/jetengine-components-elementor-bricks-query-loop`. 8. **Image Optimization** - 🔹 Descriptive filenames; alt text including control names; compress images. 9. **Mobile Optimization** - 🔹 Lazy-load screenshots; ensure code snippets scroll horizontally. 10. **User Engagement** - 🔹 Add CTA to download sample component; embed a sandbox. 11. **Schema Markup** - 🔹 `VideoObject` + `Article`; add `HowTo` steps if the guide lists tasks. 12. **Social Sharing** - 🔹 Open Graph + Twitter Cards with an annotated screenshot of controls sidebar. ## 🎯 Conclusion: - 🔹 JetEngine components centralize repeatable UI with **named controls** and **dynamic bindings**, while Bricks adds **query loops** and **related-context** power. - 🔹 Standardize naming, defaults, and context rules, then publish a component library to accelerate builds and reduce support load. - 🔹 This approach suits contributor onboarding, transparent governance, and long-term sustainability in WordPress projects. <!-- deep-read:sections end -->