Make WordPress Core

source: tags/6.5/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php

Last change on this file was 57746, checked in by joedolson, 5 months ago

Customize: Accessibility: Label menu subitems when updating menus.

Fix missing subitem indicator when menu items in the Customizer are children of parent menu items & add menu item original title to button text. Adds parity with the admin menu editor and fixes a bug where the button text was 'untitled' if the menu item title had not been edited.

Props designsimply, afercia, celloexpressions, kushang78, joedolson, rcreators.
Fixes #32728.

  • Property svn:eol-style set to native
File size: 7.1 KB
Line 
1<?php
2/**
3 * Customize API: WP_Customize_Nav_Menu_Item_Control class
4 *
5 * @package WordPress
6 * @subpackage Customize
7 * @since 4.4.0
8 */
9
10/**
11 * Customize control to represent the name field for a given menu.
12 *
13 * @since 4.3.0
14 *
15 * @see WP_Customize_Control
16 */
17class WP_Customize_Nav_Menu_Item_Control extends WP_Customize_Control {
18
19        /**
20         * Control type.
21         *
22         * @since 4.3.0
23         * @var string
24         */
25        public $type = 'nav_menu_item';
26
27        /**
28         * The nav menu item setting.
29         *
30         * @since 4.3.0
31         * @var WP_Customize_Nav_Menu_Item_Setting
32         */
33        public $setting;
34
35        /**
36         * Constructor.
37         *
38         * @since 4.3.0
39         *
40         * @see WP_Customize_Control::__construct()
41         *
42         * @param WP_Customize_Manager $manager Customizer bootstrap instance.
43         * @param string               $id      The control ID.
44         * @param array                $args    Optional. Arguments to override class property defaults.
45         *                                      See WP_Customize_Control::__construct() for information
46         *                                      on accepted arguments. Default empty array.
47         */
48        public function __construct( $manager, $id, $args = array() ) {
49                parent::__construct( $manager, $id, $args );
50        }
51
52        /**
53         * Don't render the control's content - it's rendered with a JS template.
54         *
55         * @since 4.3.0
56         */
57        public function render_content() {}
58
59        /**
60         * JS/Underscore template for the control UI.
61         *
62         * @since 4.3.0
63         */
64        public function content_template() {
65                ?>
66                <div class="menu-item-bar">
67                        <div class="menu-item-handle">
68                                <span class="item-type" aria-hidden="true">{{ data.item_type_label }}</span>
69                                <span class="item-title" aria-hidden="true">
70                                        <span class="spinner"></span>
71                                        <span class="menu-item-title<# if ( ! data.title && ! data.original_title ) { #> no-title<# } #>">{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}</span>
72                                        <# if ( 0 === data.depth ) { #>
73                                                <span class="is-submenu" style="display: none;"><?php _e( 'sub item' ); ?></span>
74                                        <# } else { #>
75                                                <span class="is-submenu"><?php _e( 'sub item' ); ?></span>
76                                        <# } #>
77                                </span>
78                                <span class="item-controls">
79                                        <button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
80                                        <?php
81                                                /* translators: 1: Title of a menu item, 2: Type of a menu item. */
82                                                printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
83                                        ?>
84                                        </span><span class="toggle-indicator" aria-hidden="true"></span></button>
85                                        <button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">
86                                        <?php
87                                                /* translators: 1: Title of a menu item, 2: Type of a menu item. */
88                                                printf( __( 'Remove Menu Item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
89                                        ?>
90                                        </span></button>
91                                </span>
92                        </div>
93                </div>
94
95                <div class="menu-item-settings" id="menu-item-settings-{{ data.menu_item_id }}">
96                        <# if ( 'custom' === data.item_type ) { #>
97                        <p class="field-url description description-thin">
98                                <label for="edit-menu-item-url-{{ data.menu_item_id }}">
99                                        <?php _e( 'URL' ); ?><br />
100                                        <input class="widefat code edit-menu-item-url" type="text" id="edit-menu-item-url-{{ data.menu_item_id }}" name="menu-item-url" />
101                                </label>
102                        </p>
103                <# } #>
104                        <p class="description description-thin">
105                                <label for="edit-menu-item-title-{{ data.menu_item_id }}">
106                                        <?php _e( 'Navigation Label' ); ?><br />
107                                        <input type="text" id="edit-menu-item-title-{{ data.menu_item_id }}" placeholder="{{ data.original_title }}" class="widefat edit-menu-item-title" name="menu-item-title" />
108                                </label>
109                        </p>
110                        <p class="field-link-target description description-thin">
111                                <label for="edit-menu-item-target-{{ data.menu_item_id }}">
112                                        <input type="checkbox" id="edit-menu-item-target-{{ data.menu_item_id }}" class="edit-menu-item-target" value="_blank" name="menu-item-target" />
113                                        <?php _e( 'Open link in a new tab' ); ?>
114                                </label>
115                        </p>
116                        <p class="field-title-attribute field-attr-title description description-thin">
117                                <label for="edit-menu-item-attr-title-{{ data.menu_item_id }}">
118                                        <?php _e( 'Title Attribute' ); ?><br />
119                                        <input type="text" id="edit-menu-item-attr-title-{{ data.menu_item_id }}" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title" />
120                                </label>
121                        </p>
122                        <p class="field-css-classes description description-thin">
123                                <label for="edit-menu-item-classes-{{ data.menu_item_id }}">
124                                        <?php _e( 'CSS Classes' ); ?><br />
125                                        <input type="text" id="edit-menu-item-classes-{{ data.menu_item_id }}" class="widefat code edit-menu-item-classes" name="menu-item-classes" />
126                                </label>
127                        </p>
128                        <p class="field-xfn description description-thin">
129                                <label for="edit-menu-item-xfn-{{ data.menu_item_id }}">
130                                        <?php _e( 'Link Relationship (XFN)' ); ?><br />
131                                        <input type="text" id="edit-menu-item-xfn-{{ data.menu_item_id }}" class="widefat code edit-menu-item-xfn" name="menu-item-xfn" />
132                                </label>
133                        </p>
134                        <p class="field-description description description-thin">
135                                <label for="edit-menu-item-description-{{ data.menu_item_id }}">
136                                        <?php _e( 'Description' ); ?><br />
137                                        <textarea id="edit-menu-item-description-{{ data.menu_item_id }}" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description">{{ data.description }}</textarea>
138                                        <span class="description"><?php _e( 'The description will be displayed in the menu if the active theme supports it.' ); ?></span>
139                                </label>
140                        </p>
141
142                        <?php
143                        /**
144                         * Fires at the end of the form field template for nav menu items in the customizer.
145                         *
146                         * Additional fields can be rendered here and managed in JavaScript.
147                         *
148                         * @since 5.4.0
149                         */
150                        do_action( 'wp_nav_menu_item_custom_fields_customize_template' );
151                        ?>
152
153                        <div class="menu-item-actions description-thin submitbox">
154                                <# if ( ( 'post_type' === data.item_type || 'taxonomy' === data.item_type ) && '' !== data.original_title ) { #>
155                                <p class="link-to-original">
156                                        <?php
157                                                /* translators: Nav menu item original title. %s: Original title. */
158                                                printf( __( 'Original: %s' ), '<a class="original-link" href="{{ data.url }}">{{ data.original_title }}</a>' );
159                                        ?>
160                                </p>
161                                <# } #>
162
163                                <button type="button" class="button-link button-link-delete item-delete submitdelete deletion"><?php _e( 'Remove' ); ?></button>
164                                <span class="spinner"></span>
165                        </div>
166                        <input type="hidden" name="menu-item-db-id[{{ data.menu_item_id }}]" class="menu-item-data-db-id" value="{{ data.menu_item_id }}" />
167                        <input type="hidden" name="menu-item-parent-id[{{ data.menu_item_id }}]" class="menu-item-data-parent-id" value="{{ data.parent }}" />
168                </div><!-- .menu-item-settings-->
169                <ul class="menu-item-transport"></ul>
170                <?php
171        }
172
173        /**
174         * Return parameters for this control.
175         *
176         * @since 4.3.0
177         *
178         * @return array Exported parameters.
179         */
180        public function json() {
181                $exported                 = parent::json();
182                $exported['menu_item_id'] = $this->setting->post_id;
183
184                return $exported;
185        }
186}
Note: See TracBrowser for help on using the repository browser.