class-wp-customize-nav-menu-item-control.php 6.8 KB

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