Attendease Blocks for the CMS
What is a block?
A block is an element on a page that takes the form of a Bootstrap row. What lives inside the row is entirely up to the block.
Blocks are written as React components.
Content and Preferences
A block is made up of content and preferences. A block configuration is made up of two tabs: the first is a content editor that is provided by each block, and the second is a preferences screen which is driven by a definition that the block provides along with a generic preferences form.
Both content and preferences are stored in the form of objects.
How do I make a block?
That's an excellent question, and I'm so glad you asked.
Content Editors
Your block should provide a content editor if there's content to edit.
Content Editor components receive three props:
Property | Description |
---|---|
content | The object containing the content properties of the block |
preferences | The key/value object containing the preferences of the block |
handleUpdate | A callback function that you are responsible for calling when there's content to update. You need to pass back the updated content prop. |
Your content editor should be named using the BlockFooContentEditor
form.
Use react-bootstrap to style the content editor.
Testing Blocks
Adding Blocks to the project
- Block components live in
src/components/blocks
. - You provide three files:
BlockFoo.js
,BlockFooConfigurationProperties.js
, andBlockFooContentEditor.js
(whereFoo
is the real name of your block). - Your main Block component class must be imported and exported in
src/index.js
. - Your main Block components must be imported in
src/blockrenderer.js
as well as being added to theconst Components
object. - Your content editor must be imported in
src/components/BlockModalEditor.js
as well being added to theconst EditorComponents
object. - Your component tests belong in
test/components
. - There is no step 7! So easy! (Hopefully we can make this more automatic over time.)
Test with karma.
yarn run test
Building / Developing / Distributing
Setup
Install yarn if you don't have it.
brew install yarn
Add the module dependencies.
yarn
Local Development
yarn start
Bundle for local development
e.g. Pointing your Attendease project to your local tree.
yarn dist
Then on the Attendease side, you would do:
import { ... } from '/path/to/attendease-blocks'
or in Webpack add an alias (and change only once!):
'attendease-blocks': '/Users/mike/Sites/attendease-blocks'
Publishing
Jenkins handles this when things are merged into master.
DO NOT CHANGE THE VERSION IN package.json!
and:
DO NOT RUN ANY OF THE release: SCRIPTS
Supported Blocks
Component | Description |
---|---|
BlockHeading | A simple heading block (h1, h2, etc) |
BlockHeroHeaderText | A heading and subheading |
BlockText | A simple text block |
BlockSpacer | A simple spacer block |
Importing Blocks
import { BlockHeading, BlockText, BlockSpacer } from 'attendease-blocks'