Welcome to Decoupled Blocks. This module is a javascript-framework-agnostic, progressive decoupling tool to allow custom blocks to be written by front end developers in the javascript framework of their choice, without needing to know any Drupal API's.
It keeps individual components encapsulated in their own directories containing all the css, js, and template assets necessary for them to work, and using an info.yml file to declare these components and their framework dependencies to Drupal.
There are no special requirements at this time. In the future, we may abstract some items to a component_api project.
npm install.tsc from the pdb_ng2 directory to compile your .ts
files into .js.Navigate to a block placement UI (core block UI or Panels, for example).
Add a block, and select one of the PDB example components.
Save your page and the decoupled component will appear!
Writing your own components:
Writing components for existing frameworks should be straightforward, write them as usual and add an info.yml file declaring them to the module. Some framework implementations may provide extra tooling or require additional boilerplate to use full functionality, see their individual README.txt files for more information.
When you find gaps in functionality you need, post them to the github issue queue, as this module is still in early development stages.
Writing your own framework definitions:
By extending the main pdb block and deriver classes and adding a library file, you can craft your own js framework definition modules! We would love to see support for other frameworks.
For now you can use the existing pdb_ng2 and pdb_react as examples for how to proceed.
Options for getting data from Drupal in components
If you give your component a required context, it will only appear on pages with that context available, and automatically pass that data forward using drupalSettings.pdb.contexts. See the ng2_example_node component for sample code.
If your component requires instance configuration you can add fields in the info.yml file that will be displayed on block placement for the site builder to fill out. Configuration values are passed to the client via drupalSettings.pdb.
Use a JSON endpoint.
Use the GraphQL module.
Author:
Current maintainers:
Early Contributors:
This project has been sponsored by:
Mediacurrent Mediacurrent helps organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results they need. Visit http://www.mediacurrent.com for more information.
Acquia Commercially Supported Drupal. Visit http://acquia.com for more information.