Skip to content

Fix/50696 #9627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jeremiahbratton wants to merge 7 commits into from
Closed

Fix/50696 #9627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d65a113
Grabbing input error span and applying invalidity classes and attribu…
jeremiahbratton Aug 26, 2025
2e004c3
Removing redundant error CSS from a previous patch
jeremiahbratton Aug 26, 2025
5012827
Adding input error message and adding style class for required fields
jeremiahbratton Aug 26, 2025
3f7b88a
Declaring inputError
jeremiahbratton Aug 26, 2025
d84b835
Revert "Removing redundant error CSS from a previous patch"
jeremiahbratton Aug 26, 2025
f269519
Extend UX changes to also cover Add New in nav menus
joedolson Sep 4, 2025
e951fd5
Replacing .show() with .slideDown('fast') to align with other UI styl…
jeremiahbratton Sep 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/js/_enqueues/wp/customize/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4066,7 +4066,7 @@
* @return {void}
*/
addNewPage: function () {
var control = this, promise, toggle, container, input, title, select;
var control = this, promise, toggle, container, input, inputError, title, select;

if ( 'dropdown-pages' !== control.params.type || ! control.params.allow_addition || ! api.Menus ) {
return;
Expand All @@ -4075,15 +4075,23 @@
toggle = control.container.find( '.add-new-toggle' );
container = control.container.find( '.new-content-item-wrapper' );
input = control.container.find( '.create-item-input' );
inputError = control.container.find('.create-item-error');
title = input.val();
select = control.container.find( 'select' );

if ( ! title ) {
input.addClass( 'invalid' );
container.addClass( 'form-invalid' );
input.attr('aria-invalid', 'true');
input.attr('aria-describedby', inputError.attr('id'));
inputError.slideDown( 'fast' );
wp.a11y.speak( inputError.text() );
return;
}

input.removeClass( 'invalid' );
container.removeClass( 'form-invalid' );
input.attr('aria-invalid', 'false');
input.removeAttr('aria-describedby');
inputError.hide();
input.attr( 'disabled', 'disabled' );

// The menus functions add the page, publish when appropriate,
Expand Down
14 changes: 10 additions & 4 deletions src/js/_enqueues/wp/customize/nav-menus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,6 +661,7 @@
itemType = dataContainer.data( 'type' ),
itemObject = dataContainer.data( 'object' ),
itemTypeLabel = dataContainer.data( 'type_label' ),
inputError = container.find('.create-item-error'),
promise;

if ( ! this.currentMenuControl ) {
Expand All @@ -671,13 +672,18 @@
if ( 'post_type' !== itemType ) {
return;
}

if ( '' === itemName.val().trim() ) {
itemName.addClass( 'invalid' );
itemName.focus();
container.addClass( 'form-invalid' );
itemName.attr('aria-invalid', 'true');
itemName.attr('aria-describedby', inputError.attr('id'));
inputError.slideDown( 'fast' );
wp.a11y.speak( inputError.text() );
return;
} else {
itemName.removeClass( 'invalid' );
container.removeClass( 'form-invalid' );
itemName.attr('aria-invalid', 'false');
itemName.removeAttr('aria-describedby');
inputError.hide();
container.find( '.accordion-section-title' ).addClass( 'loading' );
}

Expand Down
4 changes: 3 additions & 1 deletion src/wp-includes/class-wp-customize-control.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -646,9 +646,11 @@ protected function render_content() {
<div class="new-content-item-wrapper">
<label for="create-input-<?php echo esc_attr( $this->id ); ?>"><?php _e( 'New page title' ); ?></label>
<div class="new-content-item">
<input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input" >
<input type="text" id="create-input-<?php echo esc_attr( $this->id ); ?>" class="create-item-input form-required">
<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
</div>
<span id="create-input-<?php echo esc_attr( $this->id ); ?>-error" class="create-item-error error-message" style="display: none;"><?php _e( 'Please enter a page title' ); ?></span>

</div>
<?php endif; ?>
<?php
Expand Down
4 changes: 3 additions & 1 deletion src/wp-includes/class-wp-customize-nav-menus.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1237,9 +1237,11 @@ protected function print_post_type_container( $available_item_type ) {
<div class="new-content-item-wrapper">
<label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
<div class="new-content-item">
<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input">
<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input form-required">
<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
</div>
<span id="create-input-<?php echo esc_attr( $available_item_type['object'] ); ?>-error" class="create-item-error error-message" style="display: none;"><?php _e( 'Please enter an item title' ); ?></span>

</div>
<?php endif; ?>
<?php endif; ?>
Expand Down
Loading