woocommerce/woocommerce

Migrate `PanelBody` to `ToolsPanel`

Open

#59.464 aberto em 7 de jul. de 2025

Ver no GitHub
 (5 comments) (0 reactions) (0 assignees)PHP (10.294 stars) (10.695 forks)batch import
EnhancementGood First IssueKirigami

Description

In Gutenberg, there has been a progressive effort to replace the PanelBody component with the ToolsPanel( https://github.com/WordPress/gutenberg/issues/67813)

In Woo Blocks, there are still blocks using the legacy PanelBody.

This issue aims to track the migration of those blocks to ToolsPanel. This is a list of components that blocks that uses PanelBody generated by the AI:Product Elements

  • product-elements/button/edit.tsx
  • product-elements/image/edit.tsx
  • product-elements/title/edit.tsx

Handpicked Products

  • blocks/handpicked-products/inspector-controls.tsx

Reviews

  • blocks/reviews/reviews-by-category/block.tsx
  • blocks/reviews/all-reviews/block.tsx
  • blocks/reviews/reviews-by-product/edit.tsx

Product On Sale

  • blocks/product-on-sale/inspector-controls.tsx

Stock Filter

  • blocks/stock-filter/edit.tsx

Coming Soon

  • blocks/coming-soon/edit.tsx

Catalog Sorting

  • blocks/catalog-sorting/edit.tsx

Product Collection

  • blocks/product-collection/edit/inspector-controls/linked-product-control.tsx
  • blocks/product-collection/edit/inspector-controls/related-by-control.tsx
  • blocks/product-collection/edit/inspector-controls/index.tsx

Product Filters

  • blocks/product-filters/inner-blocks/price-slider/edit.tsx
  • blocks/product-filters/inner-blocks/attribute-filter/inspector.tsx
  • blocks/product-filters/inner-blocks/rating-filter/components/inspector.tsx
  • blocks/product-filters/inner-blocks/status-filter/inspector.tsx

Attribute Filter

  • blocks/attribute-filter/edit.tsx

Order Confirmation

  • blocks/order-confirmation/create-account/edit.tsx

Product Gallery

  • blocks/product-gallery/block-settings/index.tsx
  • blocks/product-gallery/inner-blocks/product-gallery-thumbnails/block-settings/index.tsx

Page Selector

  • editor-components/page-selector/index.js

Guia do colaborador

Pilha de tecnologia
javascripttypescriptreact
Domain
frontend
Tipo Issue
refactor
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-2 days
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
fresh
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
mostly clear
Prerequisites
Familiarity with Gutenberg componentsBasic knowledge of ReactUnderstanding of PanelBody and ToolsPanel APIs
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60
Direção de pesquisa
This issue involves replacing the legacy `PanelBody` component with `ToolsPanel` in multiple WooCommerce block files. The list of files is provided in the issue description, categorized by block. Start by examining the linked Gutenberg issue (#67813) to understand the migration pattern and API differences. Then, for each file, replace `PanelBody` with `ToolsPanel`, ensuring the sidebar settings remain functionally identical. Pay attention to any props or children that need adjustment. There are no open PRs or assignees, so you can begin with any file. It's recommended to tackle a simple block first, such as `blocks/catalog sorting/edit.tsx`, to get familiar with the change before proceeding to more complex ones.