diff --git a/Dicas-de-Plone-6-e-Volto.md b/Dicas-de-Plone-6-e-Volto.md index f97fd23..06d28c6 100644 --- a/Dicas-de-Plone-6-e-Volto.md +++ b/Dicas-de-Plone-6-e-Volto.md @@ -2,6 +2,8 @@ Algumas anotações enquanto estudava Plone 6 e Volto. Não pretende ser 100% completa, mas indicar onde conseguir mais ajuda sobre alguns tópicos. +> A documentação aqui pode estar desatualizada em virtude da grande velocidade de desenvolvimento do Plone/Volto! + ## Projeto A instalação do Plone cria um projeto *"monorepo"*, contendo backend, frontend e devops. @@ -322,3 +324,91 @@ Exemplos: - [Addon dropdownmenu](https://github.com/collective/volto-dropdownmenu) - [Addon subfooter](https://github.com/collective/volto-subfooter) - [Redturtle Editable Footer](https://github.com/RedTurtle/volto-editablefooter) + + +## Insights + +### Itens de Painel de Controle + +Os itens de painel de controle que aparecem no Volto não são simplesmente os itens definidos no backend. Uma parte foi redesenvolvida em React e está hard-coded e outra parte vem do backend. + +#### Itens Oriundos do Backend + +Estes itens estão definidos em [controlpanel.xml](https://github.com/plone/Products.CMFPlone/blob/master/src/Products/CMFPlone/profiles/default/controlpanel.xml) do produto base CMFPlone. Note que nem todos os itens listados aqui são servidos pela API. Por exemplo, os painéis marcados com permissão `Manage Portal` não estavam sendo retornados nos meus testes. O endereço da API é `++api++/@controlpanels`. + +Estes itens também são filtrados no Volto, após o fetch. Para fazer uma filtragem customizada, coloque a função de filtragem na configuração do Volto. Exemplo abaixo: + +``` +const filterControlPanels = (controlpanels = []) => { + const HIDDEN_CONTROL_PANELS = ['markup', 'content-rules', 'language', 'security']; + + return controlpanels.filter( + (controlpanel) => + !HIDDEN_CONTROL_PANELS.includes(controlpanel['@id'].split('/').pop()), + ); +}; + + +// Na instalação do seu addon (index.ts, por exemplo) +function applyConfig(config: ConfigType) { + config.settings.filterControlPanels = filterControlPanels; +} +``` + +> Por default, o Volto filtra os itens "markup" e "content-rules" + + + +Itens de Painel de Controle que normalmente aparecem no Volto e vem do backend: + +|Nome|Url|Id|Permission| +|---|---|---|---| +|Buscar|search|SearchSettings|Plone Site Setup: Search| +|Data e Hora|date-and-time|DateAndTime|Plone Site Setup: Site| +|E-Mail|mail|MailHost|Plone Site Setup: Mail| +|Idioma|language|LanguageSettings|Plone Site Setup: Language| +|Navegação|navigation|NavigationSettings|Plone Site Setup: Navigation| +|Site|site|PloneReconfig|Plone Site Setup: Site| +|Volto Settings|volto-settings|VoltoSettings|Manage Portal| +|Editar|editing|EditingSettings|Plone Site Setup: Editing| +|Manipulação de Imagem|imaging|ImagingSettings|Plone Site Setup: Imaging| +|Tipos de Conteúdo|dexterity-types|dexterity-types|Manage Portal| +|Configurações de Usuários e Grupos|usergroup|UsersGroupsSettings|Plone Site Setup: Users And Groups| +|Segurança|security|SecuritySettings|Plone Site Setup: Security| + + +#### Itens hard-coded + +Uma parte dos itens é feita diretamente em React. Alguns são itens que existem no Plone Clássico e outras não. + +|Nome|Id| +|---|---| +|Complementos|addons| +|Regras de conteúdo|rules| +|Gerenciamento de URL|aliases| +|Relacionamentos|relations| +|Moderar comentários|moderate-comments| +|Usuários|users| +|Participação de Usuários em Grupos|usergroupmembership| +|Grupos|groups| +|Banco de dados|database| +|Desfazer|undo| + +Para filtrar estes itens, é necessário sobrepor ("shadowing") o código original do Volto. Para isto: + +1. Crie um arquivo `Controlpanels.jsx´ no diretório ´src/customizations/volto/components/manage/Controlpanels`. +2. Copie o código original do volto lá. Você pode pegar o conteúdo [aqui](https://github.com/plone/volto/blob/main/packages/volto/src/components/manage/Controlpanels/Controlpanel.jsx). +3. Procure por um item no formato abaixo e comente: + +``` +/* Filtrando o item de painel de controle "database" (Banco de Dados) + { + '@id': '/database', + group: intl.formatMessage(messages.general), + title: intl.formatMessage(messages.database), + } +*/ +``` + + +