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

IBX-7565: Custom block's UDW config (4.x) #2331

Merged
merged 10 commits into from Apr 3, 2024
Expand Up @@ -20,7 +20,7 @@ ibexa_fieldtype_page:
name: Event name
validators:
not_blank:
message: Please provide a name
message: Please provide a name
category:
type: select
name: Select a category
Expand All @@ -37,3 +37,20 @@ ibexa_fieldtype_page:
validators:
not_blank:
message: Please select an event
content_type:
message: Please select an event
options:
types: ['event']
regexp:
message: Choose a content item
options:
pattern: '/[0-9]+/'

ibexa:
system:
default:
universal_discovery_widget_module:
configuration:
block_event_embed:
multiple: false
allowed_content_types: ['event']
@@ -1,5 +1,10 @@
{% extends '@IbexaPageBuilder/page_builder/block/config.html.twig' %}

{% block content %}
{% set form_templates = [_self] %}
{{ parent() }}
{% endblock %}

{% block basic_tab_content %}
<div class="ibexa-block-config__fields">
{{ form_row(form.name) }}
Expand All @@ -16,3 +21,15 @@
{% endif %}
</div>
{% endblock %}

{% block block_configuration_attribute_embed_widget %}
{% set attr = attr|merge({'hidden': true}) %}
{{ form_widget(form, {'attr': attr})}}
<div class="ibexa-pb-block-embed-field">
{% include '@IbexaPageBuilder/page_builder/block/config/embed_button.html.twig' with {
udw_config_name: 'block_event_embed',
data_open_udw: 'data-open-udw-embed'
} %}
{% include '@IbexaPageBuilder/page_builder/block/config/embed_preview.html.twig' %}
</div>
{% endblock %}
23 changes: 18 additions & 5 deletions docs/content_management/pages/create_custom_page_block.md
Expand Up @@ -17,7 +17,7 @@ The following example shows how to create a block that showcases an event.
First, add the following [YAML configuration](configuration.md#configuration-files):

``` yaml
[[= include_file('code_samples/page/custom_page_block/config/packages/page_blocks.yaml', 0, 6) =]][[= include_file('code_samples/page/custom_page_block/config/packages/page_blocks.yaml', 16, 39) =]]
[[= include_file('code_samples/page/custom_page_block/config/packages/page_blocks.yaml', 0, 6) =]][[= include_file('code_samples/page/custom_page_block/config/packages/page_blocks.yaml', 16, 47) =]]
```

`event` is the internal name for the block, and `name` indicates the name under which the block is available in the interface.
Expand All @@ -32,7 +32,10 @@ and an event content item that you select and embed.

For a list of all available attribute types, see [Page block attributes](page_block_attributes.md).

Each attribute can have [validators](page_block_validators.md). The `not_blank` validators in the example ensure that the user fills in the two block fields.
Each attribute can have [validators](page_block_validators.md).
The `not_blank` validators in the example ensure that the user fills in the two block fields.
The `content_type` validator in the example ensure that the user choose a content item of the content type `event`.
The `regexp` validator ensure that the final value looks like a content ID.

## Add block templates

Expand Down Expand Up @@ -104,7 +107,7 @@ The block view template could now use `ibexa_render(event_content, {'viewType':

For more information, see [Block events](page_blocks.md#block-events).

## Add edit templates
## Add edit template

You can also customize the template for the block settings modal.
Do this under the `configuration_template` [configuration key](configuration.md#configuration-files):
Expand All @@ -113,11 +116,21 @@ Do this under the `configuration_template` [configuration key](configuration.md#
[[= include_file('code_samples/page/custom_page_block/config/packages/page_blocks.yaml', 0, 7) =]]
```

Place the edit template in `templates/themes/<your_theme>/blocks/event/config.html.twig'`:
Place the edit template in `templates/themes/<your_theme>/blocks/event/config.html.twig`:

``` html+twig
[[= include_file('code_samples/page/custom_page_block/templates/themes/standard/blocks/event/config.html.twig') =]]
```

This example template overrides the `embed` attribute widget to customize the Universal Discovery Widget (UDW).
It adds itself to the `form_templates` and defines a `block_configuration_attribute_embed_widget` block.
The following UDW configuration is used so only an `event` typed content item can be selected:

``` yaml
[[= include_file('code_samples/page/custom_page_block/config/packages/page_blocks.yaml', 48, 57) =]]
```

For more information, see [UDW configuration](browser.md#udw-configuration).

Your custom page block is now ready.
Before you can use it in Page Builder, you must [enable it in Page field settings]([[= user_doc =]]/content_management/configure_ct_field_settings/#block-display).
Before you can use it in Page Builder, you must [enable it in Page field settings]([[= user_doc =]]/content_management/configure_ct_field_settings/#block-display).
4 changes: 4 additions & 0 deletions docs/content_management/pages/page_block_attributes.md
Expand Up @@ -49,6 +49,10 @@ attributes:
third_field: integer
```

`embed` and `locationlist` use the Universal Discovery Widget (UDW).
When creating a block with these two types you can configure the UDW behavior.
For more information, see [Create custom page block / Add edit template](create_custom_page_block.md#add-edit-template)

## Custom attribute types

You can create custom attribute type to add to Page blocks.
Expand Down