Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add self-contained-blocks #597

Closed
wants to merge 80 commits into from

Conversation

antonioribeiro
Copy link
Member

@antonioribeiro antonioribeiro commented Mar 18, 2020

The idea is to be able to create blocks without having to configure them on the twill.php, allowing developers to add blocks (and repeaters) using a new twill:make:block, and, also to have a library of AREA 17's opinionated blocks, to be used by Twill's Community.

This should also allow people to contribute with blocks and, in the future, even create new packages to automatically add blocks to Twill.

This PR has

Artisan twill:list:icons command

To list icons, that must be used while creating new blocks. Currently it lists icons from Twill's frontend dir, but that must be changed and icons will have to be reviewed.

Execute

php artisan twill:list:icons

// or 

php artisan twill:list:icons color

To get things like:

+---------------------+-----------------------------------------------------------------+
| Icon                | Preview URL                                                     |
+---------------------+-----------------------------------------------------------------+
| add                 | http://admin.twill-app.test/admin/icons/add.svg                 |
| colors              | http://admin.twill-app.test/admin/icons/colors.svg              |
| crop                | http://admin.twill-app.test/admin/icons/crop.svg                |
| download            | http://admin.twill-app.test/admin/icons/download.svg            |
| drag                | http://admin.twill-app.test/admin/icons/drag.svg                |
| edit                | http://admin.twill-app.test/admin/icons/edit.svg                |
| editor              | http://admin.twill-app.test/admin/icons/editor.svg              |
| flex-grid           | http://admin.twill-app.test/admin/icons/flex-grid.svg           |
| image               | http://admin.twill-app.test/admin/icons/image.svg               |
| info                | http://admin.twill-app.test/admin/icons/info.svg                |
| location            | http://admin.twill-app.test/admin/icons/location.svg            |
| media-grid          | http://admin.twill-app.test/admin/icons/media-grid.svg          |
| media-list          | http://admin.twill-app.test/admin/icons/media-list.svg          |
| preferences         | http://admin.twill-app.test/admin/icons/preferences.svg         |
| preview             | http://admin.twill-app.test/admin/icons/preview.svg             |
| publish             | http://admin.twill-app.test/admin/icons/publish.svg             |
| quote               | http://admin.twill-app.test/admin/icons/quote.svg               |
| search              | http://admin.twill-app.test/admin/icons/search.svg              |
| text                | http://admin.twill-app.test/admin/icons/text.svg                |
| trash               | http://admin.twill-app.test/admin/icons/trash.svg               |
| video               | http://admin.twill-app.test/admin/icons/video.svg               |
+---------------------+-----------------------------------------------------------------+

If you are using iTerm or PuTTY, you can probably CTRL/CMD click the preview URL to see the actual icon on your browser.

Artisan twill:list:blocks

This command list all available blocks (Twill's and user's) and give as much information as possible about blocks. The list has a filter and some flags (--twill, --app, --custom, --repeater) to allow people to find what they need easily.

Some examples:

php artisan twill:list:blocks quote
php artisan twill:list:blocks --twill
php artisan twill:list:blocks --repetears

To get something like:

+-----------------------+----------+-----------------------+-------+----------+-----------+--------+-----------+---------------------------------+---------------------------------+
| Title                 | Trigger  | Name                  | Group | Type     | Icon      | Source | NewFormat | File                            | Component                       |
+-----------------------+----------+-----------------------+-------+----------+-----------+--------+-----------+---------------------------------+---------------------------------+
| Carousel              |          | carousel              | twill | block    | flex-grid | twill  | yes       | carousel.blade.php              | a17-block-carousel              |
| Carousel item         | Add item | carousel-item         | twill | repeater |           | twill  | yes       | carousel-item.blade.php         | a17-block-carousel-item         |
| Quote                 |          | quote                 | twill | block    | text      | twill  | yes       | quote.blade.php                 | a17-block-quote                 |
| Text                  |          | text                  | twill | block    | text      | twill  | yes       | text.blade.php                  | a17-block-text                  |
| Title                 |          | text                  | app   | block    | text      | app    | yes       | title.blade.php                 | a17-block-title                 |
+-----------------------+----------+-----------------------+-------+----------+-----------+--------+-----------+---------------------------------+---------------------------------+

Artisan twill:make:block

The main purpose of this change. When executing:

php artisan twill:make:block SuperQuote quote text

It should tell something like this:

Creating block...
File: /Users/antonioribeiro/code/twill/twill-app/resources/views/admin/blocks/super-quote.blade.php
Block SuperQuote was created.
Block is ready to use with the name 'super-quote'

And you now just need to refresh your Twill admin page to see the block already working on the block editor.

Blocks are self-contained files

Here's a block example:

@twillBlockTitle('Carousel')
@twillBlockIcon('flex-grid')
@twillBlockGroup('twill')

@formField('select', [
    'name' => 'variation',
    'label' => 'Carousel variation',
    'options' => [
        [ 'value' => 'fixed-width', 'label' => 'Fixed width' ],
        [ 'value' => 'variable-width', 'label' => 'Variable width' ]
    ],
    'default' => 0
])

@formField('repeater', ['type' => 'carousel-item'])

And the repeater:

@twillRepeaterTitle('Carousel item')
@twillRepeaterTrigger('Add item')

@formField('input', [
    'name' => 'description',
    'label' => 'Description',
    'translated' => true,
])

@formField('medias', [
    'name' => 'image',
    'label' => 'Image',
    'max' => 1,
    'withVideoUrl' => false,
])

Automatic repeater generation

If the block you are generating is using one or more repeaters, it will try to recreate the same structure to provide a new block and new repeaters, if possible.

No BC break

If you have lots of blocks in your twill.php, it will use them and merge with the new ones, from Twill's and App's libraries.

Don't create new blocks if you don't need

If a block from Twill's gallery is enough (i.e. "image"), just use it. No need to generate a new block, they are all and always available.

Configurable

All directories used by it are configurable and you can have as many directories (libraries of blocks) as you want, and even disable Twill's one, if needed.

Artisan twill:make:module (changed to a new :make namespace)

This is a small change introduced to use the same namespace for all "make" commands Twill may have in the future.
twill:module will be deprecated in Twill 3.0.

schaschjan and others added 25 commits May 25, 2020 16:15
Our issue does not seem to be a Travis issue but more likely a Testbench one related to the fact that we copy files in the Laravel project it uses. It seems like added files are not being picked up on first run. To reproduce locally, rm -rf vendor/orchestra/testbench-core && composer install.
See 1bf93ad. Login has its own test so we do not need to check the status of the login request on every test. It appears that on a first run the Testbench created Laravel app does not pick up the admin.php file resulting in a route missing when being redirected to the dashboard after login.
…uplicating the whole configuration file"

This reverts commit d338140.
Will be removed in Twill 3.0 in favor of twill:make:module
… users of Twill default blocks

- Favor @twillBlockProperty syntax for clarity and to preserve syntax highlighting
- Support new @twillBlockCompiled and @twillBlockCompoment for custom Vue compiled blocks which are not inlined in the response but in the build
- Restore default compiled text and image blocks when a developer did not create any blocks yet and uses the block_editor form fields without specifying a blocks list or a group
- Use new text snd image block fields when generating a new block using them as template
@ifox
Copy link
Member

ifox commented Jul 12, 2020

Merged in 1e95b0a, thank you so much @antonioribeiro!

During my review I made a few changes:

  • Added back twill:module command as deprecated. Will be removed in Twill 3.0 in favor of the new twill:make:module
  • Renamed blocks annotations, support compiled blocks and prevent BC for users of Twill default blocks
    • Favored @twillBlock<Property> syntax for clarity and to preserve syntax highlighting, @twillRepeater<Property> can be used in repeaters, and @twillProp<Property> can be used universally. Examples: @twillBlockTitle, @twillRepeaterTrigger, @twillPropIcon.
    • Supported new @twillBlockCompiled and @twillBlockCompoment for custom Vue compiled blocks which are not inlined in the response but in the build
    • Restored default compiled text and image blocks when a developer did not create any blocks yet and uses the block_editor form fields without specifying a blocks list or a group
    • Used new text and image block fields when generating a new block using them as template
  • Added defaults to block generator (text block as the source, and text icon)

See https://github.com/area17/twill/blob/2.x/CHANGELOG.md#added, for more!

@marinaglancy
Copy link
Contributor

FYI this broke settings forms, see #701

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants