Skip to main content

A collection of reusable, production-ready content blocks for Wagtail CMS, styled with Tailwind CSS and daisyUI.

Project description

wagtail-tw-blocks

CI CD Code Style: Black Code Linting: Ruff Docker Image Docker Publish PyPI - Version PyPI - Python Version PyPI - Downloads PyPI - License

Overview

wagtail-tw-blocks is a collection of reusable, production-ready content blocks for Wagtail CMS, styled with Tailwind CSS and daisyUI. It provides a set of common UI components—ready to drop into your StreamField—so you can build rich, modern page layouts without reinventing the wheel.


Available blocks

  • Accordion (Collapse): Expandable/collapsible sections for FAQs or structured content.
  • Alert: Highlight important messages or status updates.
  • Carousel: Image or content slider with responsive design.
  • Code: Syntax-highlighted code snippets for technical content (Requires highlight.js and clipboard.js to be included in your page).
  • Diff: Side-by-side or inline difference highlighting for image comparisons.

Installation

pip install wagtail-tw-blocks

Configuration

Add wagtail_blocks to your INSTALLED_APPS after configuring your Wagtail settings:

# project/settings.py

INSTALLED_APPS = [
    "wagtail_blocks",
    # ...
]

Available settings

You can customize the behavior of wagtail-tw-blocks by adding the following settings to your Django settings file:

# project/settings.py

# Extend or override the default programming languages for the CodeBlock
WAGTAIL_BLOCKS_PROGRAMMING_LANGUAGES = [
    ('python', 'Python'),
    ('javascript', 'JavaScript'),
    ('html', 'HTML'),
    ('css', 'CSS'),
    ('java', 'Java'),
    ('csharp', 'C#'),
    ('cpp', 'C++'),
    ('ruby', 'Ruby'),
    ('go', 'Go'),
    ('php', 'PHP'),
    # ...
]

# Show or hide the programming language label in the CodeBlock
WAGTAIL_BLOCKS_SHOW_PROGRAMMING_LANGUAGE = True  # Default is True

# Show or hide the copy button in the CodeBlock
WAGTAIL_BLOCKS_SHOW_COPY_BUTTON = True  # Default is True

# Show or hide window control buttons in the CodeBlock
WAGTAIL_BLOCKS_SHOW_WINDOW_CONTROLS = True  # Default is True

Usage example

# blog/models.py

from wagtail_blocks import blocks
from wagtail.admin.panels import FieldPanel
from wagtail.fields import StreamField
from wagtail.models import Page
from django.utils.translation import gettext_lazy as _


class Article(Page):
    content = StreamField(
        [
            ("accordion", blocks.AccordionBlock()),
            ("alert", blocks.AlertBlock()),
            ("carousel", blocks.CarouselBlock()),
            ("code", blocks.CodeBlock()),
            ("diff", blocks.DiffBlock()),
        ],
        help_text=_("Article content"),
    )

    content_panels = Page.content_panels + [
        FieldPanel("content"),
        # ...
    ]
<!-- blog/base.html -->

{% load static %}

<!doctype html>

<html data-theme="luxury">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wagtail Blocks Usage Example</title>
    <!-- You also may want to include TailwindCSS and daisyUI -->
    <link href="{% static 'wagtail_blocks/css/styles.css' %}" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <!-- ... -->
     <main>
       {{ article.content }}
     </main>
  </body>
</html>

Key features

  • Modern design: Tailwind CSS + daisyUI styling for clean, responsive layouts.
  • Multiple themes: All daisyUI themes included, with easy customization.
  • CI/CD: GitHub Actions pipelines for automated testing and deployment.
  • Dependency management: Poetry for reproducible, maintainable installs.
  • Code formatting: Black for consistent, automatic formatting.
  • Linting: Ruff for fast, comprehensive linting.
  • Testing: Django test runner for unit and integration tests.
  • Starter configs: .gitignore, pyproject.toml, and other essentials included.

Contributing

We welcome community contributions. See the CONTRIBUTING guide for setup instructions, coding standards, and workflow. Opening an issue before major changes helps align on scope and direction.


Support

For questions, bug reports, or feature requests, open an issue or join the conversation in GitHub Discussions.


License

Licensed under the MIT License. See the LICENSE file for details.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

wagtail_tw_blocks-0.1.1.tar.gz (30.8 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

wagtail_tw_blocks-0.1.1-py3-none-any.whl (32.6 kB view details)

Uploaded Python 3

File details

Details for the file wagtail_tw_blocks-0.1.1.tar.gz.

File metadata

  • Download URL: wagtail_tw_blocks-0.1.1.tar.gz
  • Upload date:
  • Size: 30.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/2.2.0 CPython/3.12.3 Linux/6.11.0-1018-azure

File hashes

Hashes for wagtail_tw_blocks-0.1.1.tar.gz
Algorithm Hash digest
SHA256 8bf284367daeb20f2f427b79c686d77070cd459ae9196e487799c6767c5591a0
MD5 0a290b3c8ac09dfbc1b49bde071db5fc
BLAKE2b-256 9df586396731592576d38f91930836869b188400b5bc7a59d78d663ebf489819

See more details on using hashes here.

File details

Details for the file wagtail_tw_blocks-0.1.1-py3-none-any.whl.

File metadata

  • Download URL: wagtail_tw_blocks-0.1.1-py3-none-any.whl
  • Upload date:
  • Size: 32.6 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: poetry/2.2.0 CPython/3.12.3 Linux/6.11.0-1018-azure

File hashes

Hashes for wagtail_tw_blocks-0.1.1-py3-none-any.whl
Algorithm Hash digest
SHA256 122bc87e3f3736ee75946b796f894842d271fc63748f89b5172d10e6aba7df8c
MD5 2e422fe80d5db5b2bd810741a60d6e78
BLAKE2b-256 d2fbd13bf18487288463b321e3119d4cc9e2a05b4ab57b5d4f0291d4b7c30aeb

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page