Blocks and non-traditional page structure

I have found this plugin maybe suit what you are looking for. To be used in Gutenberg. Hope this helps.
Sticky Block for Gutenberg Editor – WordPress plugin | www.ads-software.com

Hi @brentrambo,

Creating a dynamic and modern full-page layout like the one in the CodePen example while still leveraging WordPress blocks can be challenging but is entirely possible. Below, I’ll guide you through the different approaches and tools available to achieve this effectively while maintaining scalability and ease of editing.

1. Using WordPress Blocks (Without Page Builders)

WordPress blocks (Gutenberg editor) can handle custom layouts and designs to a degree, but they are not inherently designed for complex “full-page effects.” However, you can extend their capabilities with the following approaches:Custom HTML Block

• How to Use:
  • Place your HTML code in a custom HTML block.
  • Add your CSS either in the block’s “Advanced > Additional CSS Class(es)” or through the Site Editor under “Additional CSS.”
• Pros:
  • Great for smaller custom sections.
  • No need for extra plugins or themes.
• Cons:
  • Becomes unwieldy for complex designs.
  • Difficult to maintain and edit without coding knowledge.

Group and Columns Blocks

• How to Use:
  • Use the “Group” block to structure your content and apply background images, colors, or effects.
  • Nest “Columns” blocks inside for layout flexibility.
• Pros:
  • Native WordPress feature; no additional plugins.
  • User-friendly editing.
• Cons:
  • Limited design flexibility.
  • Effects like parallax or animations require custom CSS or JavaScript.

Block Enhancer Plugins

Consider plugins to extend Gutenberg’s capabilities:

• Stackable or Kadence Blocks
  These plugins provide advanced block designs with built-in effects like parallax, animations, and layout controls.
• Pros:
  • No coding required.
  • Fully integrated with WordPress blocks.
• Cons:
  • Might still lack some advanced customization options.

2. Using Full Site Editing (FSE)

With FSE (enabled in block themes like Twenty Twenty-Three):

• Use template parts to create layouts.
• Apply global styles directly within the editor.
• Add custom CSS for animations and effects under Appearance > Editor > Styles > Additional CSS.

Note: FSE is still maturing and might not fully match the flexibility of page builders for complex designs.3. Page Builders for Full Control

Page builders like Elementor, Beaver Builder, or Divi are designed for creating advanced layouts with ease. Here’s how they can help:Why Use Page Builders?

• Drag-and-Drop Ease: Create complex layouts without writing HTML or CSS.
• Built-in Effects: Add animations, parallax scrolling, and full-page designs easily.
• Theme Integration: Most page builders work seamlessly with WordPress themes.

How to Use:

1. Install a page builder plugin (Elementor Free is a great start).
2. Create your page using the builder’s interface.
3. Apply custom CSS or JavaScript for additional effects, if needed.

Cons:

• Adds extra weight to your site (may slow down performance if not optimized).
• Lock-in effect (difficult to switch builders later).

4. Hybrid Approach: Blocks + Custom CSS/JS

• Recommended for Developers:
  1. Use Gutenberg blocks for base structure.
  2. Add custom CSS and JavaScript to achieve advanced effects.
  3. Save reusable blocks for similar sections to avoid duplication.
• Where to Add Code:
  • Use the Additional CSS area in WordPress Customizer.
  • Add scripts using plugins like Code Snippets or enqueue them in your theme’s functions.php.

5. Tools for Modern Effects

If you want advanced animations or interactivity:

• CSS Libraries: Use frameworks like Tailwind CSS or animate.css for modern effects.
• JavaScript Libraries: Integrate libraries like GSAP or ScrollMagic for scroll-triggered animations.

6. What You’re Missing

The challenge with copying/pasting fully designed blocks into an HTML block is that:

1. It bypasses the block editor’s intended workflow, making editing harder.
2. It might introduce conflicts if you change themes or plugins later.

Solution:

• Use reusable blocks, templates, or a child theme to manage custom layouts.
• If editing ease is crucial, invest in a block enhancer plugin or a page builder.

Conclusion

• For code-heavy designs: Use custom HTML/CSS within blocks, with reusable block templates for consistency.
• For ease of use: Consider block enhancer plugins or a page builder like Elementor.
• For advanced effects: Combine WordPress blocks with lightweight CSS/JavaScript frameworks.

Let me know if you’d like a step-by-step guide for any of these approaches!

Hafiz

Thank you @hope-leo for the plugin suggestion. From my exploration, I’m not sure it can do what I’m aiming for. It may help with sticky stuff but not with nesting blocks in html blocks.

@drhafizadnan thank you for trying to help, but at the end of your reply I’m still where I started. I don’t want to use builders, and I’d like to avoid pasting block code inside html blocks. Both viable but neither preferable.