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

1. Block components live in src/components/blocks.
2. You provide three files: BlockFoo.js, BlockFooConfigurationProperties.js, and BlockFooContentEditor.js (where Foo is the real name of your block).
3. Your main Block component class must be imported and exported in src/index.js.
4. Your main Block components must be imported in src/blockrenderer.js as well as being added to the const Components object.
5. Your content editor must be imported in src/components/BlockModalEditor.js as well being added to the const EditorComponents object.
6. Your component tests belong in test/components.
7. 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'