Skip to main content

This package allows you to define and organise static assets for your Wagtail blocks frontend.

Project description

Wagtail CRX block frontend assets rendering

Define and organize frontend assets (like js or css files) for your Wagtail CRX blocks.

Getting started

  1. Add the app to INSTALLED_APPS:

    INSTALLED_APPS = [
     ...
     "wagtail_crx_block_frontend_assets",
     ...
     ]
    
  2. Integrate your blocks with this app.

     from wagtail.blocks import CharBlock, StructBlock
     from wagtail_crx_block_frontend_assets.blocks import BlockStaticAssetsRegistrationMixin
    
     class FrontendAssetsBlock(BlockStaticAssetsRegistrationMixin, StructBlock):
    
         title = CharBlock(
             required=False,
             label="Title",
         )
    
         def register_assets(self, block_value):
             static_assets = []
    
             static_assets += [
                 self.StaticAsset("path/to/asset.js", target="_blank"),
                 self.StaticAsset("path/to/style.css", media="print"),
    
             ]
    
             return static_assets
    

    Your block class has to inherit from BlockStaticAssetsRegistrationMixin and you have to implement register_assets function. This function returns array of BlockStaticAssetsRegistrationMixin.StaticAsset instances. You can use block_value parameter to conditionally render assets based on current block values.

  3. Then you can define place in your templates where you want your block assets to be rendered like this:

    {% extends "coderedcms/pages/base.html" %}
    
    {% block custom_assets %}
    {{ block.super }}
    {% include "wagtail_crx_block_frontend_assets/includes/block_assets.html" with required_file_extension=".css" %}
    {% endblock custom_assets %}
    
    {% block custom_scripts %}
    {{ block.super }}
    {% include "wagtail_crx_block_frontend_assets/includes/block_assets.html" with required_file_extension=".js" %}
    {% endblock custom_scripts %}
    

Development

  1. Make sure you have Python virtual env installed
    $ python -m venv .venv
    
  2. Install this app in editable mode
    $ pip install -e .
    
  3. Migrate testapp DB
    $ python manage.py migrate
    
  4. Run the testapp
    $ python manage.py runserver
    
    Or hit F5 if you use Visual Studio Code

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

Built Distribution

File details

Details for the file wagtail_crx_block_frontend_assets-0.0.1.tar.gz.

File metadata

File hashes

Hashes for wagtail_crx_block_frontend_assets-0.0.1.tar.gz
Algorithm Hash digest
SHA256 c03beba0fc33c66ffcedae8828ae5e3ac198ca27cc58df7ce0a392bc339a54f9
MD5 7bcd62c13d17556efdc190d2cf93842d
BLAKE2b-256 89f0a87ce02cede593f2ab413363f99d3145f272c125aa57c58a68e585228608

See more details on using hashes here.

File details

Details for the file wagtail_crx_block_frontend_assets-0.0.1-py3-none-any.whl.

File metadata

File hashes

Hashes for wagtail_crx_block_frontend_assets-0.0.1-py3-none-any.whl
Algorithm Hash digest
SHA256 92a35027f1a9802d6a2026b2bdf9b386fe2601283df75662fe662a10f08d9e34
MD5 e7359ab8ac377f96f6ad9ce567b1df95
BLAKE2b-256 3072ebb26a032eb019b6cd018c916550a95f441f21f6c6dd051c700a166b6ee3

See more details on using hashes here.

Supported by

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