DOCSEARCHbyAlgolia
Submit Docs

Nectarblocks Documentation

website·Indexed 34 days ago

https://docs.nectarblocks.com

Documentation for Nectarblocks, a WordPress Gutenberg editor extension. Covers block controls for CSS properties, dynamic data integration with ACF and custom post types, Theme Builder for Archive and Single templates, and the Template Library. Includes guides on plugin installation, import/export tools, and system requirements such as PHP 8.0+.

Tokens
23.1K
Snippets
9
Records
182
Agent score
67%

What's inside Nectarblocks

  1. Overview of the Nectarblocks Animation System

    Nectarblocks provides a GSAP-powered animation system for WordPress Gutenberg blocks. It allows developers to combine different trigger types on a single block (e.g., a 'Scroll Into View' entrance and an 'Interaction' hover effect). Key features include per-property timing, spring physics for bouncy motion, 3D transforms with perspective, and color animation for text and backgrounds.

  2. Use Nectarblocks Theme Builder to design site templates

    The Theme Builder allows you to design structural templates for your site—including headers, footers, blog/archive layouts, 404 pages, and WooCommerce pages—using Nectar blocks. Templates are edited in the WordPress block editor and applied based on defined display conditions. This is distinct from the Template Library (pre-built page designs) and Global Sections (reusable content injected at theme hooks).

  3. Use the Nectar Text block for flexible typography

    The Nectar Text block is a versatile element designed for all text displays on a site. It features unique inline controls for SEO and visual impact, as well as specialized letter-by-letter animations.

  5. Access the Nectarblocks Getting Started guide

    The Getting Started tab provides an introduction to the block collection, template library, global settings, responsive editing, and Unsplash integration via video previews.

    To access it:

    1. Open Nectarblocks from the WordPress admin left sidebar or toolbar.
    2. The Getting Started tab is selected by default upon opening the panel.

  6. Understand the difference between Nectarblocks Plugin and Theme

    Nectarblocks offers both a plugin and a theme, which serve different purposes:

    • Nectarblocks Plugin: A collection of blocks, templates, and controls compatible with any WordPress theme. It is used primarily for creating page and post content.
    • Nectarblocks Theme: A companion theme designed for optimal compatibility. It provides global design controls (header navigation, typography, colors) and site-wide templates. It includes a Visual Hook System for adding global content (like footers or banners) without editing theme files.

    Note: While third-party themes can be used with the plugin, the Nectarblocks theme is recommended for the best experience and is required to use the Demo Importer functionality.

  7. Create and manage Global Sections

    Global Sections are a special Post Type used for content repeated across multiple pages (e.g., footers, CTAs). This feature requires the Nectarblocks Theme. Global Sections are managed via WP Admin → Global Sections. Each section includes metaboxes for Display Locations and Display Conditions to control visibility.

  8. Handle Header State overrides in Navigation

    When a Navigation block is placed inside a Header Navigation template part, it supports state-specific styling. A badge in the panel indicates the current state: Default, Transparent, Scrolled, or Overlay Menu. Any styling control in the panel can be overridden for a specific state; these overrides can be reset to the base value using the reset action on the control.

  9. Use WordPress Custom Fields as Dynamic Data

    Plain post meta added via the block editor's Custom Fields panel or add_post_meta() appears under the Custom Fields group in the dynamic data picker.

    Important Notes:

    • Enable the Custom Fields panel in the editor via Preferences $\rightarrow$ Panels.
    • The field must have a value assigned to at least one post before it will appear in the picker when editing a template.

  10. Create a Single Template with Theme Builder

    Single templates define the layout for individual entries, such as a single blog article or a custom post type item. Note: This feature requires the Nectarblocks theme to be installed.

    Steps to create a Single Template:

    1. Go to the Templates page in the WordPress admin.
    2. Name the template.
    3. In the right sidebar, open the Template tab and select Single.
    4. Add content using dynamic data types to pull content from the post.

    In the editor, fields using the "Current Post" data type appear as placeholders. These placeholders render the actual content of the specific post being viewed on the frontend.

  11. Implement Dynamic Videos in Nectarblocks

    The Video data type populates video sources from the WordPress database. It is available for the Video Player block and the Video background control in Column, Row, and Flexbox blocks. Video sources must come from custom fields (e.g., ACF file or url fields) as built-in post fields do not support video.

  12. Loop through data using Post Grid or Query Loop blocks

    Nectarblocks provides two methods to render lists of items using Dynamic Data:

    1. Post Grid Block: Best for standard grids. Layout is handled automatically. Use the Content tab to select post types and add custom fields as repeaters. Useful for creating Archive Templates.
    2. Query Loop Block: A flexible WordPress block that allows looping through various data sources (posts, pages, CPTs) and integrating any Nectarblocks Data Type.