Skip to content

Move styles into specific waveform styles dropdown area - #80060

Merged
scruffian merged 1 commit into
trunkfrom
update/waveform-pane-styles
Jul 10, 2026
Merged

Move styles into specific waveform styles dropdown area#80060
scruffian merged 1 commit into
trunkfrom
update/waveform-pane-styles

Conversation

@jeryj

@jeryj jeryj commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

What?

Moves waveform style selection from general block styles pane into dedicated Waveform panel

Why?

For long-term, I think waveform selection needs to be a dropdown so we can reserve the Styles pane for traditional combination of styles, not restricted to one waveform setting.

How?

  • Add Waveform panel
  • Add waveform styles to block json
  • Output waveform style options as dropdown

Testing Instructions

  • Add a playlist block
  • Go to Block Inspector -> Styles
  • Choose different Waveform styles from the dropdown

Testing Instructions for Keyboard

Screenshots or screencast

playlist block with waveform style options
Before After

Use of AI Tools

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions Bot added [Package] Block library /packages/block-library [Package] Block editor /packages/block-editor labels Jul 9, 2026
@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown

Size Change: +114 B (0%)

Total Size: 7.68 MB

📦 View Changed
Filename Size Change
build/scripts/block-library/index.min.js 333 kB +114 B (+0.03%)

compressed-size-action

@github-actions github-actions Bot added [Package] Style Engine /packages/style-engine [Package] Preferences /packages/preferences [Package] Media Utils /packages/media-utils [Package] Commands /packages/commands [Package] Core commands [Package] Patterns /packages/patterns [Package] DataViews /packages/dataviews [Package] Fields /packages/fields [Package] Router /pacakges/router [Package] Theme /packages/theme [Package] UI /packages/ui [Package] Sync labels Jul 10, 2026
@scruffian
scruffian force-pushed the update/waveform-pane-styles branch from 01929b0 to a672209 Compare July 10, 2026 10:05
@github-actions github-actions Bot removed [Package] Data /packages/data [Package] Server Side Render /packages/server-side-render [Package] Compose /packages/compose [Package] Core data /packages/core-data [Package] Viewport /packages/viewport [Package] Keycodes /packages/keycodes [Package] Plugins /packages/plugins labels Jul 10, 2026

@scruffian scruffian left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This makes a lot of sense. We had it like this originally but moved it block styles to try to make the UI more generic. However as you point out this puts us into a corner if we want more layout options for the block in the future.

Let's bring it in.

label={ __( 'Background' ) }
className="background-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot group="styles" />

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This change will affect all consumers using this slot group, won't it? Why is this reordering necessary?

By the way, for all block-specific settings, we use a panel labeled "Settings".

See: #67813

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

This shouldn't have been there. Thanks for catching!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Reverted in #80111

Comment on lines +45 to +52
const WAVEFORM_STYLE_OPTIONS = [
{ label: __( 'Bars' ), value: 'bars' },
{ label: __( 'Mirror' ), value: 'mirror' },
{ label: __( 'Line' ), value: 'line' },
{ label: __( 'Blocks' ), value: 'blocks' },
{ label: __( 'Dots' ), value: 'dots' },
{ label: __( 'Seekbar' ), value: 'seekbar' },
];

@t-hamano t-hamano Jul 10, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

It's not immediately clear what these terms refer to, so I think we need to add a translation context.

@github-actions

Copy link
Copy Markdown

Flaky tests detected in a672209.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29085218294
📝 Reported issues:

@t-hamano

Copy link
Copy Markdown
Contributor

At the very least, I don't think we should reorder public API slots solely for the purpose of a specific block.

@jeryj

jeryj commented Jul 10, 2026

Copy link
Copy Markdown
Contributor Author

@t-hamano

I don't think we should reorder public API slots solely for the purpose of a specific block.

I didn't review my AI work closely enough. Trying to move too quickly to get the Podcast Player ready. That was my fault.

label={ __( 'Background' ) }
className="background-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot group="styles" />

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Reverted in #80111

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Playlist [Package] Block library /packages/block-library [Type] Enhancement A suggestion for improvement.

3 participants