Add support for custom label in archive dropdown

[dhananjaykuber]

Fixes

What?

This PR makes the label above the Archives block dropdown editable by introducing a TextControl field in the block’s settings panel.

Why?

Currently, when the Archives block is set to display as a dropdown, there is an option to show a label above it. However, this label is hardcoded as "Archives" and cannot be customized by the user.

How?

1. Added a new label attribute to the block with a default value of "Archives":

"label": {
  "type": "string",
  "default": "Archives"
}

2. Updated the edit function to include a TextControl UI component in the sidebar settings:

<TextControl
  __nextHasNoMarginBottom
  __next40pxDefaultSize
  label={ __( 'Label' ) }
  value={ label }
  onChange={ ( value ) => setAttributes( { label: value } ) }
  placeholder={ __( 'Archives' ) }
/>

Testing Instructions

1. Open the post or page editor.
2. Add the "Archives" block.
3. In the block settings sidebar, enable "Display as dropdown".
4. Enable "Show label".
5. Confirm that a TextControl appears allowing you to edit the label.

Screenshots or screencast

[github-actions]

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: dhananjaykuber <dhananjaykuber@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@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.

[fabiankaegy]

These changes in this file seem unrelated to the PR 🤔

[dhananjaykuber]

Removed unrelated changes

[fabiankaegy]

Instead of having this control live in the Inspector I would much rather see the actual text label in the editor canvas use a RichText component to actually allow for inline editing.

[dhananjaykuber]

Added RichText component in canvas

[t-hamano]

We cannot hard-code the default label here, as it is not translatable.

[dhananjaykuber]

@fabiankaegy @t-hamano I've made the mentioned changes

[t-hamano]

I've been researching this a bit more and have come across a few things to note.

• A similar PR has already been submitted: Archives: Make the label above the dropdown editable #58856 cc @colinduwe
• The most difficult thing to solve is that this component uses a ServerSideRender component, so an ideal approach might be to refactor the Edit component to not use a ServerSideRender component.

[dhananjaykuber]

I've been researching this a bit more and have come across a few things to note.

• A similar PR has already been submitted: Archives: Make the label above the dropdown editable #58856 cc @colinduwe
• The most difficult thing to solve is that this component uses a ServerSideRender component, so an ideal approach might be to refactor the Edit component to not use a ServerSideRender component.

Yes @t-hamano, I'll work on converting this block to dynamic block.

[t-hamano]

I'll work on converting this block to dynamic block.

It would be great if we could refactor it to just JS rendering. However, this might be technically quite difficult, as all of the logic in the wp_get_archives() function would have to be implemented in JS. The wp_get_archives() function contains hard-coded SQL statements.

Personally, I would like to propose thoroughly discussing the direction and approach in #57528.