Download the PHP package tobento/app-block without Composer

App Block

The app block provides interfaces to create block editors. There are two create your custom editor.

Editing blocks is kept simple having clients in minds. Furthermore, blocks use CSS classes only to style its content. This has multiple advantages:

• easily customize content by its classes
• using strong Content-Security-Policy blocking style-src
• limits user to keep corporate design

Table of Contents

• Getting Started
  • Requirements
• Documentation
  • App
  • Block Boot
    • Block Config
  • Available Editors
    • Default Editor
      • Configure Editor
      • Render Editor
      • Saving Editor
    • Mail Editor
      • Configure Mail Editor
      • Render Mail Editor
      • Saving Mail Editor
  • Crud Editor Field
  • Block Views Editor Middleware
  • Available Blocks
    • Downloads Block
    • Hero Block
    • Image Block
    • Image Gallery Block
    • Persons Block
    • Text Block
  • Block Options
  • Available Block Options
    • Classes Option
    • Color Option
    • Layout Option
    • Margin And Padding Option
  • Deleting Generated Pictures
  • Console
    • Purge Blocks Command
  • Learn More
    • Creating Custom Editor
    • Adding Blocks Using Editor Factories
• Credits

  ---

Getting Started

Add the latest version of the app block project running this command.

Requirements

• PHP 8.0 or greater

Documentation

App

Check out the App Skeleton if you are using the skeleton.

You may also check out the App to learn more about the app in general.

Block Boot

The block boot does the following:

• installs and loads block config file
• implements needed interfaces
• add routes for the block editors

Block Config

The configuration for the block is located in the file at the default App Skeleton config location where you can configure the block editors for your application.

Available Editors

Default Editor

This editor is the default implementation.

Configure Editor

In the Block Config you may configure the existing editor or creating new editors using the .

EditorFactory Methods

You may use the following methods to configure your editor to fit your requirements.

You may check out the App Language to learn more about languages.

Render Editor

In your view file, use the editor method to render the editor with its blocks using views located in the directory.

You may check out the Block Views Editor Middleware section which provides two ways to integrate editors.

Saving Editor

Blocks will be stored using the with a status if not set otherwise. Its up to you changing the status other than .

Mail Editor

This editor will render blocks using views located in the directory.

Configure Mail Editor

In the Configure Editor for its available methods.

Render Mail Editor

Check out the Render Editor section to learn more about it.

Crud Editor Field

You may use the field to easily integrate a block editor when using the App CRUD.

Workflow

Blocks will be stored using the block repository with a status when a CRUD resource has not been saved. Once the CRUD resource is saved, the status will be changed to . When a CRUD resource gets deleted, the status will be changed back to . In addition, blocks will be stored in JSON format in the specified CRUD BlockEditor field.

To clean blocks consider using the Purge Blocks Command.

Render Blocks

There are many ways how to render the stored blocks. One way is to use the editors block factory to render the created blocks stored in your CRUD resource.

Block Views Editor Middleware

The block views editor middleware integrates block editors based on the defined block views and the specified or resolved resource.

Set up

You may configure the resource resolver in the Block Config file:

View

Views starting with are specific to its defined resource , meaning blocks will only be rendered on the matching resource. Views such as and will always render its blocks within the same but indepedently of the . You can define as many views you like.

Deleting Blocks

If your resource is a App CRUD being resolved by the slugs, you may use field, which will delete blocks while deleting the field.

Otherwise, you will need to implement your own logic using the block repository.

Available Blocks

Downloads Block

This block lets you add files to be displayed for download or be viewed in browser.

Requirements

Make sure you have the storage added on the parameter on each of the following features in the file:

You may check out the App Media for more information.

Hero Block

This block creates an editable text block using the Js Editor and lets you add an image to be displayed.

Image Block

This block lets you add an image to be displayed.

Image Gallery Block

This block lets you add multiple images to be displayed as a gallery. Clicking on an image opens up a modal with bigger sized images.

Persons Block

This block lets you add persons to be displayed. For instance, you add a team section.

Text Block

This block creates an editable text block using the Js Editor.

Block Options

You can configure the block options in the file in the interfaces section:

You may customize editable block options for each block separately:

Available Methods:

Available Block Options

Classes Option

The classes option lets you select multiple CSS classes to be assigned on the block.

Color Option

The color option lets you select a color for the background and text.

Layout Option

The layout option lets you define multiple layouts for the block if supported.

Make sure, you have created the corresponding view file like and , otherwise the default view file is used.

Margin And Padding Option

The margin and padding option lets you select a margin and/or padding size.

Deleting Generated Pictures

Blocks such as the Media Picture Feature.

To clear generated pictures, once a block is updated or deleted, you will need to define an event listener in the file:

Console

Purge Blocks Command

Use the following command to purge blocks:

If you would like to automate this process, consider installing the App Schedule bundle and using a command task:

Learn More

Creating Custom Editor

Option 1 with view namespace only

In the Block Config file just add a custom .

Finally, add the view files in the defined which you want to customize skipping others you do not want to customize.

Option 2 with custom editor factory

By creating a custom editor factory, you will be able to add blocks using the factory.

First, create the editor factory by extending the :

Next, add the view files in the defined which you want to customize skipping others you do not want to customize.

Finally, configure your editor in the Block Config file.

Adding Blocks Using Editor Factories

It may be useful to add blocks using the editor factories from within the app if you have different components such as a Shop component providing specific shop blocks.

Credits

• Tobias Strub
• All Contributors