diff --git a/projects/packages/jetpack-mu-wpcom/changelog/remove-theme-showcase-action-from-theme-details b/projects/packages/jetpack-mu-wpcom/changelog/remove-theme-showcase-action-from-theme-details new file mode 100644 index 0000000000000..c4060e6a278ff --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/remove-theme-showcase-action-from-theme-details @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Themes: Fixed an issue that was showing a broken Theme Showcase action in the active theme details diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/theme-actions.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/theme-actions.js new file mode 100644 index 0000000000000..e0a7cd84f518a --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/js/theme-actions.js @@ -0,0 +1,32 @@ +const wpcomThemesRemoveWpcomActions = () => { + const themeOverlay = document.querySelector( '.theme-overlay' ); + if ( ! themeOverlay ) { + return; + } + + const observer = new MutationObserver( mutations => { + for ( const mutation of mutations ) { + for ( const node of mutation.addedNodes ) { + // If this is not an overlay for the active theme, bail and check the next node. + if ( + ! node.classList.contains( 'theme-overlay' ) || + ! node.classList.contains( 'active' ) + ) { + continue; + } + + const themeActions = node.querySelector( '.theme-actions .active-theme' ); + for ( const action of themeActions?.children ?? [] ) { + if ( action.getAttribute( 'href' )?.includes( 'https://wordpress.com' ) ) { + themeActions.removeChild( action ); + } + } + return; + } + } + } ); + + observer.observe( themeOverlay, { childList: true } ); +}; + +document.addEventListener( 'DOMContentLoaded', wpcomThemesRemoveWpcomActions ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/wpcom-themes.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/wpcom-themes.php index 2de09536330bb..714831e387b4d 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/wpcom-themes.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-themes/wpcom-themes.php @@ -61,6 +61,33 @@ function wpcom_themes_add_theme_showcase_menu() { } $site_slug = wp_parse_url( home_url(), PHP_URL_HOST ); - add_submenu_page( 'themes.php', esc_attr__( 'Theme Showcase', 'jetpack-mu-wpcom' ), __( 'Theme Showcase', 'jetpack-mu-wpcom' ), 'read', "https://wordpress.com/themes/$site_slug?ref=wpcom-themes-menu" ); + add_submenu_page( + 'themes.php', + esc_attr__( 'Theme Showcase', 'jetpack-mu-wpcom' ), + __( 'Theme Showcase', 'jetpack-mu-wpcom' ), + current_user_can( 'switch_themes' ) ? 'switch_themes' : 'edit_theme_options', + "https://wordpress.com/themes/$site_slug?ref=wpcom-themes-menu" + ); } add_action( 'admin_menu', 'wpcom_themes_add_theme_showcase_menu' ); + +/** + * Removes actions from the active theme details added by Core to replicate our custom WP.com submenus. + * + * Core expect the menus to link to WP Admin, but our submenus point to wordpress.com so the actions won't work. + * + * @see https://github.com/WordPress/wordpress-develop/blob/80096ddf29d3ffa4d5654f5f788df7f598b48756/src/wp-admin/themes.php#L356-L412 + */ +function wpcom_themes_remove_wpcom_actions() { + wp_enqueue_script( + 'wpcom-theme-actions', + plugins_url( 'js/theme-actions.js', __FILE__ ), + array(), + Jetpack_Mu_Wpcom::PACKAGE_VERSION, + array( + 'strategy' => 'defer', + 'in_footer' => true, + ) + ); +} +add_action( 'load-themes.php', 'wpcom_themes_remove_wpcom_actions' );