From c9141ebd97173026affd650aa9a057b075d528eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Noco=C5=84?= Date: Mon, 12 May 2025 22:13:42 +0200 Subject: [PATCH 01/12] Twig Components --- .../content_type/config/custom_services.yaml | 2 +- .../article_tab/config/custom_services.yaml | 2 +- .../search/config/append_to_services.yaml | 2 +- .../oauth_google/config/custom_services.yaml | 2 +- .../back_office_elements/custom_components.md | 195 ++++++++++-------- .../back_office_tabs/back_office_tabs.md | 4 +- .../event_reference/twig_component_events.md | 16 ++ docs/templating/components.md | 123 +++++++++++ .../img/twig_components_symfony_profiler.png | Bin 0 -> 135088 bytes .../layout/customize_storefront_layout.md | 19 ++ .../component_twig_functions.md | 32 +++ .../twig_function_reference.md | 1 + mkdocs.yml | 3 + 13 files changed, 313 insertions(+), 88 deletions(-) create mode 100644 docs/api/event_reference/twig_component_events.md create mode 100644 docs/templating/components.md create mode 100644 docs/templating/img/twig_components_symfony_profiler.png create mode 100644 docs/templating/twig_function_reference/component_twig_functions.md diff --git a/code_samples/back_office/content_type/config/custom_services.yaml b/code_samples/back_office/content_type/config/custom_services.yaml index ddf035c414..3c0d1da78e 100644 --- a/code_samples/back_office/content_type/config/custom_services.yaml +++ b/code_samples/back_office/content_type/config/custom_services.yaml @@ -4,4 +4,4 @@ services: arguments: $template: '@@ibexadesign/content_type/edit/custom_tab.html.twig' tags: - - { name: ibexa.admin_ui.component, group: 'content-edit-sections' } + - { name: ibexa.twig.component, group: 'content-edit-sections' } diff --git a/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml b/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml index 96a6884ab9..3915d3a8f2 100644 --- a/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml +++ b/code_samples/back_office/dashboard/article_tab/config/custom_services.yaml @@ -10,4 +10,4 @@ services: arguments: $groupIdentifier: 'custom_group' tags: - - { name: ibexa.admin_ui.component, group: 'dashboard-blocks' } + - { name: ibexa.twig.component, group: 'dashboard-blocks' } diff --git a/code_samples/back_office/search/config/append_to_services.yaml b/code_samples/back_office/search/config/append_to_services.yaml index d696ba4c7a..c7013c63a8 100644 --- a/code_samples/back_office/search/config/append_to_services.yaml +++ b/code_samples/back_office/search/config/append_to_services.yaml @@ -25,7 +25,7 @@ services: $template: '@@ibexadesign/ui/global_search_autocomplete_product_template.html.twig' $groupIdentifier: 'global-search-autocomplete-product' tags: - - { name: ibexa.admin_ui.component, group: global-search-autocomplete-templates } + - { name: ibexa.twig.component, group: global-search-autocomplete-templates } App\Search\SortingDefinition\Provider\SectionNameSortingDefinitionProvider: tags: diff --git a/code_samples/user_management/oauth_google/config/custom_services.yaml b/code_samples/user_management/oauth_google/config/custom_services.yaml index e4bceef1cf..a843389f5d 100644 --- a/code_samples/user_management/oauth_google/config/custom_services.yaml +++ b/code_samples/user_management/oauth_google/config/custom_services.yaml @@ -10,4 +10,4 @@ services: arguments: $template: '@@ibexadesign/account/login/oauth2_login.html.twig' tags: - - { name: ibexa.admin_ui.component, group: login-form-after } + - { name: ibexa.twig.component, group: login-form-after } diff --git a/docs/administration/back_office/back_office_elements/custom_components.md b/docs/administration/back_office/back_office_elements/custom_components.md index f191f0a6a9..be24ab9bed 100644 --- a/docs/administration/back_office/back_office_elements/custom_components.md +++ b/docs/administration/back_office/back_office_elements/custom_components.md @@ -2,85 +2,116 @@ description: Back office components allow you to inject any custom widgets into selected places of the user interface. --- -# Custom components - -The back office has designated places where you can use your own components. - -Components enable you to inject widgets (for example, **My dashboard** blocks) and HTML code (for example, a tag for loading JS or CSS files). -A component is any class that implements the `Renderable` interface. -It must be tagged as a service in `config/services.yaml`: - -``` yaml -App\Component\MyNewComponent: - tags: - - { name: ibexa.admin_ui.component, group: content-edit-form-before } -``` - -`group` indicates where the widget is displayed. The available groups are: - -- [`stylesheet-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L101) -- [`script-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L102) -- [`stylesheet-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L210) -- [`script-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L211) -- [`content-edit-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L37) -- [`content-edit-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L47) -- [`content-create-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L37) -- [`content-create-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L45) -- [`dashboard-blocks`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig#L30) -- [`dashboard-all-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig#L6) -- [`dashboard-my-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig#L6) -- [`content-type-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/content_type/index.html.twig#L37) -- `calendar-widget-before` -- [`login-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L7) -- [`login-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L70) -- [`global-search`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L129) - -## Base component classes - -If you only need to inject a short element (for example, a Twig template or a CSS link) without writing a class, you can make use of the following base classes: - -- `TwigComponent` renders a Twig template. -- `LinkComponent` renders the HTML `` tag. -- `ScriptComponent` renders the HTML `