Skip to content

Conversation

mnocon
Copy link
Contributor

@mnocon mnocon commented May 12, 2025

Question Answer
JIRA Ticket Jira: https://issues.ibexa.co/browse/IBX-9697
Versions master, 4.6
Edition All

Previews:

The Twig Components Package will be part of the OSS edition: once that's available I will add links to the classes from the PHP API Reference

Checklist

  • Text renders correctly
  • Text has been checked with vale
  • Description metadata is up to date
  • Redirects cover removed/moved pages
  • Code samples are working
  • PHP code samples have been fixed with PHP CS fixer
  • Added link to this PR in relevant JIRA ticket or code PR

@mnocon mnocon force-pushed the twig-components branch from cba64b9 to c9141eb Compare May 12, 2025 20:53
@mnocon mnocon marked this pull request as ready for review May 13, 2025 07:00
@mnocon mnocon requested a review from wiewiurdp May 13, 2025 07:18
@mnocon mnocon requested a review from a team May 14, 2025 09:49
@ezrobot ezrobot requested review from adriendupuis, dabrt and julitafalcondusza and removed request for a team May 14, 2025 09:49
Copy link
Contributor

@adriendupuis adriendupuis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

I have a doubt about the YAML code samples, they seem to use the old component group identifiers.

I would try to cross-link a bit more,
and to explain the examples a bit more.

We will have to document how to move now to the new components between 4.6.19 and .20, without waiting for 5.0 to do it.

$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 }

This comment was marked as resolved.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mnocon mnocon changed the base branch from master to 5.0 May 19, 2025 07:24
@mnocon
Copy link
Contributor Author

mnocon commented May 20, 2025

@adriendupuis I've applied your feedback in:

@mnocon mnocon requested a review from adriendupuis May 20, 2025 09:40
Copy link
Contributor

@adriendupuis adriendupuis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved (Approvable w/ the application og the language declaration fix for colorization)


### Examples

``` hmml+twig
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
``` hmml+twig
``` html+twig


### Examples

``` hmml+twig
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
``` hmml+twig
``` html+twig

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! Fixed in 212fdda

@mnocon mnocon added Wait with merge PRs that shouldn't be merged instantly Ready for MERGE labels May 21, 2025
mnocon and others added 2 commits May 21, 2025 15:47
…2741)

* Marked Dashboard as Experience feature and mentioned Twig Components

* Update docs/administration/dashboard/customize_dashboard.md

Co-authored-by: Adrien Dupuis <[email protected]>

---------

Co-authored-by: Adrien Dupuis <[email protected]>
Copy link

code_samples/ change report

Before (on target branch)After (in current PR)

code_samples/back_office/components/twig_components.yaml


code_samples/back_office/components/twig_components.yaml

docs/templating/components.md@68:``` yaml
docs/templating/components.md@69:[[= include_file('code_samples/back_office/components/twig_components.yaml') =]]
docs/templating/components.md@70:```

001⫶ibexa_twig_components:
002⫶ admin-ui-user-menu:
003⫶ custom-html-component:
004⫶ type: html
005⫶ arguments:
006⫶ content: '<b>Hello world!</b>'
007⫶ custom-template-component:
008⫶ type: template
009⫶ arguments:
010⫶ template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
011⫶ parameters:
012⫶ user_content:
013⫶ name: "Thumbnail"
014⫶ thumbnail:
015⫶ resource: https://placecats.com/100/100
016⫶ custom-controller-component:
017⫶ type: controller
018⫶ arguments:
019⫶ controller: '\App\Controller\MyController::requestAction'
020⫶ parameters:
021⫶ parameter1: 'custom'
022⫶ parameter2: true
023⫶ admin-ui-stylesheet-head:
024⫶ custom-link-component:
025⫶ type: stylesheet
026⫶ arguments:
027⫶ href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback'
028⫶ rel: stylesheet
029⫶ crossorigin: anonymous
030⫶ integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
031⫶ type: text/css
032⫶ admin-ui-script-head:
033⫶ custom-script-component:
034⫶ type: script
035⫶ arguments:
036⫶ src: 'https://doc.ibexa.co/en/latest/js/custom.js'
037⫶ crossorigin: anonymous
038⫶ defer: false
039⫶ async: true
040⫶ integrity: sha384-Ewi2bBDtPbbu4/+fs8sIbBJ3zVl0LDOSznfhFR/JBK+SzggdRdX8XQKauWmI9HH2
041⫶ type: text/javascript


code_samples/back_office/content_type/config/custom_services.yaml

docs/administration/back_office/content_tab_switcher.md@84:```yaml
docs/administration/back_office/content_tab_switcher.md@85:[[= include_file('code_samples/back_office/content_type/config/custom_services.yaml') =]]
docs/administration/back_office/content_tab_switcher.md@86:```

001⫶services:
002⫶ app.custom_content_edit_tab:
003⫶ parent: Ibexa\AdminUi\Component\TwigComponent
004⫶ arguments:
005⫶ $template: '@@ibexadesign/content_type/edit/custom_tab.html.twig'
006⫶ tags:

code_samples/back_office/content_type/config/custom_services.yaml

docs/administration/back_office/content_tab_switcher.md@84:```yaml
docs/administration/back_office/content_tab_switcher.md@85:[[= include_file('code_samples/back_office/content_type/config/custom_services.yaml') =]]
docs/administration/back_office/content_tab_switcher.md@86:```

001⫶services:
002⫶ app.custom_content_edit_tab:
003⫶ parent: Ibexa\AdminUi\Component\TwigComponent
004⫶ arguments:
005⫶ $template: '@@ibexadesign/content_type/edit/custom_tab.html.twig'
006⫶ tags:
007⫶            - { name: ibexa.admin_ui.component, group: 'content-edit-sections' }
007⫶            - { name: ibexa.twig.component, group: 'admin-ui-content-edit-sections' }


code_samples/back_office/dashboard/article_tab/config/custom_services.yaml

docs/administration/back_office/back_office_tabs/back_office_tabs.md@37:``` yaml
docs/administration/back_office/back_office_tabs/back_office_tabs.md@38:[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 7) =]]
docs/administration/back_office/back_office_tabs/back_office_tabs.md@39:```

001⫶services:
002⫶ App\Tab\Dashboard\Everyone\EveryoneArticleTab:
003⫶ autowire: true
004⫶ autoconfigure: true
005⫶ public: false
006⫶ tags:
007⫶ - { name: ibexa.admin_ui.tab, group: dashboard-everyone }

docs/administration/back_office/back_office_tabs/back_office_tabs.md@70:``` yaml
docs/administration/back_office/back_office_tabs/back_office_tabs.md@71:[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 1) =]][[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 7, 13) =]]
docs/administration/back_office/back_office_tabs/back_office_tabs.md@72:```

001⫶services:
002⫶ app.my_tabs.custom_group:
003⫶ parent: Ibexa\AdminUi\Component\TabsComponent
004⫶ arguments:
005⫶ $groupIdentifier: 'custom_group'
006⫶ tags:


code_samples/back_office/dashboard/article_tab/config/custom_services.yaml

docs/administration/back_office/back_office_tabs/back_office_tabs.md@37:``` yaml
docs/administration/back_office/back_office_tabs/back_office_tabs.md@38:[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 7) =]]
docs/administration/back_office/back_office_tabs/back_office_tabs.md@39:```

001⫶services:
002⫶ App\Tab\Dashboard\Everyone\EveryoneArticleTab:
003⫶ autowire: true
004⫶ autoconfigure: true
005⫶ public: false
006⫶ tags:
007⫶ - { name: ibexa.admin_ui.tab, group: dashboard-everyone }

docs/administration/back_office/back_office_tabs/back_office_tabs.md@70:``` yaml
docs/administration/back_office/back_office_tabs/back_office_tabs.md@71:[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 1) =]][[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 7, 13) =]]
docs/administration/back_office/back_office_tabs/back_office_tabs.md@72:```

001⫶services:
002⫶ app.my_tabs.custom_group:
003⫶ parent: Ibexa\AdminUi\Component\TabsComponent
004⫶ arguments:
005⫶ $groupIdentifier: 'custom_group'
006⫶ tags:
007⫶            - { name: ibexa.admin_ui.component, group: 'dashboard-blocks' }
007⫶            - { name: ibexa.twig.component, group: 'admin-ui-dashboard-blocks' }

docs/administration/back_office/back_office_tabs/create_dashboard_tab.md@21:``` yaml
docs/administration/back_office/back_office_tabs/create_dashboard_tab.md@22:[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 7) =]]
docs/administration/back_office/back_office_tabs/create_dashboard_tab.md@23:```

001⫶services:
002⫶ App\Tab\Dashboard\Everyone\EveryoneArticleTab:
003⫶ autowire: true
004⫶ autoconfigure: true
005⫶ public: false
006⫶ tags:
007⫶ - { name: ibexa.admin_ui.tab, group: dashboard-everyone }


code_samples/back_office/search/config/append_to_services.yaml

docs/administration/back_office/customize_search_sorting.md@23:``` yaml hl_lines="5"
docs/administration/back_office/customize_search_sorting.md@24:services:
docs/administration/back_office/customize_search_sorting.md@25: #…
docs/administration/back_office/customize_search_sorting.md@26:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 29, 32) =]]
docs/administration/back_office/customize_search_sorting.md@27:```

001⫶services:
002⫶ #…
003⫶ App\Search\SortingDefinition\Provider\SectionNameSortingDefinitionProvider:
004⫶ tags:
005❇️ - name: ibexa.search.sorting_definition.provider

docs/administration/back_office/customize_search_suggestion.md@54:``` yaml
docs/administration/back_office/customize_search_suggestion.md@55:services:
docs/administration/back_office/customize_search_suggestion.md@56: #…
docs/administration/back_office/customize_search_suggestion.md@57:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 2, 3) =]]
docs/administration/back_office/customize_search_suggestion.md@58:```

001⫶services:
002⫶ #…
003⫶ App\EventSubscriber\MySuggestionEventSubscriber: ~

docs/administration/back_office/customize_search_suggestion.md@78:``` yaml
docs/administration/back_office/customize_search_suggestion.md@79:services:
docs/administration/back_office/customize_search_suggestion.md@80: #…
docs/administration/back_office/customize_search_suggestion.md@81:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 4, 20) =]]
docs/administration/back_office/customize_search_suggestion.md@82:```

001⫶services:
002⫶ #…
003⫶ App\Search\Serializer\Normalizer\Suggestion\ProductSuggestionNormalizer:
004⫶ autoconfigure: false
005⫶
006⫶ app.search.suggestion.serializer:
007⫶ decorates: ibexa.search.suggestion.serializer
008⫶ class: Symfony\Component\Serializer\Serializer
009⫶ autoconfigure: false
010⫶ arguments:
011⫶ $normalizers:
012⫶ - '@App\Search\Serializer\Normalizer\Suggestion\ProductSuggestionNormalizer'
013⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\ContentSuggestionNormalizer'
014⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\LocationNormalizer'
015⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\ParentLocationCollectionNormalizer'
016⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\SuggestionCollectionNormalizer'
017⫶ $encoders:
018⫶ - '@serializer.encoder.json'

docs/administration/back_office/customize_search_suggestion.md@140:``` yaml
docs/administration/back_office/customize_search_suggestion.md@141:services:
docs/administration/back_office/customize_search_suggestion.md@142: #…
docs/administration/back_office/customize_search_suggestion.md@143:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 21, 28) =]]
docs/administration/back_office/customize_search_suggestion.md@144:```

001⫶services:
002⫶ #…
003⫶ ibexa.search.autocomplete.product_template:
004⫶ parent: Ibexa\AdminUi\Component\TabsComponent
005⫶ arguments:
006⫶ $template: '@@ibexadesign/ui/global_search_autocomplete_product_template.html.twig'
007⫶ $groupIdentifier: 'global-search-autocomplete-product'
008⫶ tags:

docs/administration/back_office/back_office_tabs/create_dashboard_tab.md@21:``` yaml
docs/administration/back_office/back_office_tabs/create_dashboard_tab.md@22:[[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 7) =]]
docs/administration/back_office/back_office_tabs/create_dashboard_tab.md@23:```

001⫶services:
002⫶ App\Tab\Dashboard\Everyone\EveryoneArticleTab:
003⫶ autowire: true
004⫶ autoconfigure: true
005⫶ public: false
006⫶ tags:
007⫶ - { name: ibexa.admin_ui.tab, group: dashboard-everyone }


code_samples/back_office/search/config/append_to_services.yaml

docs/administration/back_office/customize_search_sorting.md@23:``` yaml hl_lines="5"
docs/administration/back_office/customize_search_sorting.md@24:services:
docs/administration/back_office/customize_search_sorting.md@25: #…
docs/administration/back_office/customize_search_sorting.md@26:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 29, 32) =]]
docs/administration/back_office/customize_search_sorting.md@27:```

001⫶services:
002⫶ #…
003⫶ App\Search\SortingDefinition\Provider\SectionNameSortingDefinitionProvider:
004⫶ tags:
005❇️ - name: ibexa.search.sorting_definition.provider

docs/administration/back_office/customize_search_suggestion.md@54:``` yaml
docs/administration/back_office/customize_search_suggestion.md@55:services:
docs/administration/back_office/customize_search_suggestion.md@56: #…
docs/administration/back_office/customize_search_suggestion.md@57:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 2, 3) =]]
docs/administration/back_office/customize_search_suggestion.md@58:```

001⫶services:
002⫶ #…
003⫶ App\EventSubscriber\MySuggestionEventSubscriber: ~

docs/administration/back_office/customize_search_suggestion.md@78:``` yaml
docs/administration/back_office/customize_search_suggestion.md@79:services:
docs/administration/back_office/customize_search_suggestion.md@80: #…
docs/administration/back_office/customize_search_suggestion.md@81:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 4, 20) =]]
docs/administration/back_office/customize_search_suggestion.md@82:```

001⫶services:
002⫶ #…
003⫶ App\Search\Serializer\Normalizer\Suggestion\ProductSuggestionNormalizer:
004⫶ autoconfigure: false
005⫶
006⫶ app.search.suggestion.serializer:
007⫶ decorates: ibexa.search.suggestion.serializer
008⫶ class: Symfony\Component\Serializer\Serializer
009⫶ autoconfigure: false
010⫶ arguments:
011⫶ $normalizers:
012⫶ - '@App\Search\Serializer\Normalizer\Suggestion\ProductSuggestionNormalizer'
013⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\ContentSuggestionNormalizer'
014⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\LocationNormalizer'
015⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\ParentLocationCollectionNormalizer'
016⫶ - '@Ibexa\Search\Serializer\Normalizer\Suggestion\SuggestionCollectionNormalizer'
017⫶ $encoders:
018⫶ - '@serializer.encoder.json'

docs/administration/back_office/customize_search_suggestion.md@140:``` yaml
docs/administration/back_office/customize_search_suggestion.md@141:services:
docs/administration/back_office/customize_search_suggestion.md@142: #…
docs/administration/back_office/customize_search_suggestion.md@143:[[= include_file('code_samples/back_office/search/config/append_to_services.yaml', 21, 28) =]]
docs/administration/back_office/customize_search_suggestion.md@144:```

001⫶services:
002⫶ #…
003⫶ ibexa.search.autocomplete.product_template:
004⫶ parent: Ibexa\AdminUi\Component\TabsComponent
005⫶ arguments:
006⫶ $template: '@@ibexadesign/ui/global_search_autocomplete_product_template.html.twig'
007⫶ $groupIdentifier: 'global-search-autocomplete-product'
008⫶ tags:
009⫶            - { name: ibexa.admin_ui.component, group: global-search-autocomplete-templates }
009⫶            - { name: ibexa.twig.component, group: global-search-autocomplete-templates }


code_samples/user_management/oauth_google/config/custom_services.yaml

docs/users/oauth_client.md@97:``` yaml
docs/users/oauth_client.md@98:[[= include_file('code_samples/user_management/oauth_google/config/custom_services.yaml', 0, 6) =]]
docs/users/oauth_client.md@99:```

001⫶services:
002⫶ #…
003⫶
004⫶ App\OAuth\GoogleResourceOwnerMapper:
005⫶ tags:
006⫶ - { name: ibexa.oauth2_client.resource_owner_mapper, identifier: google }

docs/users/oauth_client.md@115:``` yaml
docs/users/oauth_client.md@116:services:
docs/users/oauth_client.md@117: #…
docs/users/oauth_client.md@118:
docs/users/oauth_client.md@119:[[= include_file('code_samples/user_management/oauth_google/config/custom_services.yaml', 7, 13) =]]
docs/users/oauth_client.md@120:```

001⫶services:
002⫶ #…
003⫶
004⫶ app.components.oauth2_login:
005⫶ parent: Ibexa\AdminUi\Component\TwigComponent
006⫶ arguments:
007⫶ $template: '@@ibexadesign/account/login/oauth2_login.html.twig'
008⫶ tags:


code_samples/user_management/oauth_google/config/custom_services.yaml

docs/users/oauth_client.md@97:``` yaml
docs/users/oauth_client.md@98:[[= include_file('code_samples/user_management/oauth_google/config/custom_services.yaml', 0, 6) =]]
docs/users/oauth_client.md@99:```

001⫶services:
002⫶ #…
003⫶
004⫶ App\OAuth\GoogleResourceOwnerMapper:
005⫶ tags:
006⫶ - { name: ibexa.oauth2_client.resource_owner_mapper, identifier: google }

docs/users/oauth_client.md@115:``` yaml
docs/users/oauth_client.md@116:services:
docs/users/oauth_client.md@117: #…
docs/users/oauth_client.md@118:
docs/users/oauth_client.md@119:[[= include_file('code_samples/user_management/oauth_google/config/custom_services.yaml', 7, 13) =]]
docs/users/oauth_client.md@120:```

001⫶services:
002⫶ #…
003⫶
004⫶ app.components.oauth2_login:
005⫶ parent: Ibexa\AdminUi\Component\TwigComponent
006⫶ arguments:
007⫶ $template: '@@ibexadesign/account/login/oauth2_login.html.twig'
008⫶ tags:
009⫶            - { name: ibexa.admin_ui.component, group: login-form-after }
009⫶            - { name: ibexa.twig.component, group: admin-ui-login-form-after }


Download colorized diff

@mnocon mnocon merged commit 63353de into 5.0 May 28, 2025
6 of 7 checks passed
@mnocon mnocon deleted the twig-components branch May 28, 2025 06:55
mnocon added a commit that referenced this pull request May 28, 2025
* Twig Components

* Rebuild

* Added `admin-ui` prefix

* Review suggestions

* Make Symfony Profiler more visible

* Updated screenshot

* Applied suggestions from code review

Co-authored-by: Adrien Dupuis <[email protected]>

* Manual fixes

* Fixed broken link

* Fixed syntac typo

* Marked Dashboard as Experience feature and mentioned Twig Components (#2741)

* Marked Dashboard as Experience feature and mentioned Twig Components

* Update docs/administration/dashboard/customize_dashboard.md

Co-authored-by: Adrien Dupuis <[email protected]>

---------

Co-authored-by: Adrien Dupuis <[email protected]>

* Removed mentions of Storefront Twig Component groups

---------

Co-authored-by: Adrien Dupuis <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Ready for MERGE Wait with merge PRs that shouldn't be merged instantly

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants