WCR is a collection of enhancements to Drupal 8 UX using Web Components.
WCR offers a ender any block on any page on request. For example, you may choose to render the Main Content block on the frontpage, or the Menu block on /admin
.
Combined with ShadowDOM, this allows developers and users to export their Drupal blocks and embed them on external sites.
- Block List: a list of blocks on the page requested, with their cache context. Primarily for debug purposes
- Usage: add
?_wrapper_format=drupal_wcr&_wcr_mode=list
to request URL.
- Usage: add
- Single Block: outputs an HTML page, but only with one block. This can be used for embedding via
<iframe>
.- Usage: add
?_wrapper_format=drupal_wcr&_wcr_mode=singleblock&_wcr_block={Block ID}
to request URL. Use the Block ID you see in the output using theBlock List
format.
- Usage: add
- Polymer Element: wraps a block as a Polymer element definition, so that it can be embedded on pages via HTML Import and Custom Element tags. This also allows for refreshless-like navigation which I introduced in a previous post.
- Usage: add
?_wrapper_format=drupal_wcr&_wcr_mode=lis&_wcr_block={Block ID}t
to request URL.
- Usage: add
- SPF: outputs JSON response compatible with Youtube's Structured Page Fragments framework. This can also be used to acheive refreshless-like navigation.
- Usage: add
?_wrapper_format=drupal_wcr&_wcr_mode=spf
to request URL.
- Usage: add
YOu can also create your own format via Plugin:
- Implement
RenderArrayFormatterInterface
- Annotate with
@RenderArrayFormatter
Provides a UI helper for exporting a block on page, generating the code for embedding and providing preview.
Non-refresh Navigation with Componentized Blocks.
Somewhat equivalent to RefreshLess + BigPipe.
See Blog Post | Documentation
- A controller for building Lazybuilder-built content (like Fragments in Symfony; need security measures)
- A CUSTOM ELEMENT for embedding
- UI for exporting block