hook = add_theme_page( __( 'Mega Menus', 'softicon-mega-menu' ), __( 'Mega Menus', 'softicon-mega-menu' ), 'edit_theme_options', self::SLUG, array( $this, 'render' ) ); } public function action_links( $links ) { array_unshift( $links, '' . esc_html__( 'Manage panels', 'softicon-mega-menu' ) . '' ); return $links; } public function styles( $hook ) { if ( $hook !== $this->hook ) { return; } wp_register_style( 'almm-admin', false, array(), ALMM_PLUGIN_VERSION ); wp_enqueue_style( 'almm-admin' ); wp_add_inline_style( 'almm-admin', ' .almm-admin .card { max-width: 820px; } .almm-admin .almm-steps { margin: 0 0 4px 18px; } .almm-admin .almm-steps li { margin-bottom: 6px; } .almm-admin .almm-create { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 16px; } .almm-admin .almm-create input[type=text] { width: 280px; max-width: 100%; } .almm-admin .almm-panels { max-width: 820px; } .almm-admin .almm-panels code { font-size: 12px; } .almm-admin .almm-panels + .description { margin-top: 12px; } .almm-admin .almm-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 16px 0 4px; } .almm-admin .almm-video { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #dcdcde; border-radius: 8px; background: #f6f7f7; color: #1d2327; text-decoration: none; } .almm-admin .almm-video:hover, .almm-admin .almm-video:focus { border-color: #4f46e5; background: #f5f3ff; color: #1d2327; } .almm-admin .almm-video svg { flex: none; width: 36px; height: 36px; } .almm-admin .almm-video strong { display: block; } .almm-admin .almm-video small { color: #646970; } .almm-video-dialog { width: min(960px, 92vw); padding: 0; border: 0; border-radius: 10px; background: #000; overflow: visible; } .almm-video-dialog::backdrop { background: rgba(15, 23, 42, .75); } .almm-video-dialog .almm-video-frame { aspect-ratio: 16 / 9; } .almm-video-dialog iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 10px; } .almm-video-dialog .almm-video-close { position: absolute; top: -40px; right: 0; padding: 4px 8px; border: 0; background: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } ' ); // the video plays from youtube-nocookie.com only after a click; without JavaScript the card opens YouTube wp_register_script( 'almm-admin', false, array(), ALMM_PLUGIN_VERSION, true ); wp_enqueue_script( 'almm-admin' ); wp_add_inline_script( 'almm-admin', ' ( function () { var dialog = document.querySelector( ".almm-video-dialog" ); if ( ! dialog || ! dialog.showModal ) { return; } var frame = dialog.querySelector( ".almm-video-frame" ); document.querySelectorAll( ".almm-video[data-video]" ).forEach( function ( link ) { link.addEventListener( "click", function ( event ) { event.preventDefault(); var iframe = document.createElement( "iframe" ); iframe.src = "https://www.youtube-nocookie.com/embed/" + encodeURIComponent( link.dataset.video ) + "?autoplay=1&rel=0"; iframe.title = link.dataset.title; iframe.allow = "autoplay; encrypted-media; fullscreen; picture-in-picture"; iframe.allowFullscreen = true; frame.replaceChildren( iframe ); dialog.showModal(); } ); } ); dialog.querySelector( ".almm-video-close" ).addEventListener( "click", function () { dialog.close(); } ); dialog.addEventListener( "click", function ( event ) { if ( event.target === dialog ) { dialog.close(); } } ); dialog.addEventListener( "close", function () { frame.replaceChildren(); } ); } )(); ' ); } // the theme's header template part, where the Navigation block usually lives; themes with several headers name the main one "header" private function header_url() { $headers = get_block_templates( array( 'area' => 'header' ), 'wp_template_part' ); if ( ! $headers ) { return admin_url( 'site-editor.php' ); } foreach ( $headers as $header ) { if ( 'header' === $header->slug ) { return block::edit_url( $header->id ); } } return block::edit_url( $headers[0]->id ); } // video guides on the softicon YouTube channel private function videos() { return array( array( 'id' => 'X_APEz4RrdM', 'title' => __( 'Step-by-step guide', 'softicon-mega-menu' ), 'text' => __( 'Build a mega menu from start to finish', 'softicon-mega-menu' ), 'length' => '2:28', ), array( 'id' => 'dujCbVTPBlQ', 'title' => __( 'Quick tour', 'softicon-mega-menu' ), 'text' => __( 'What the plugin can do', 'softicon-mega-menu' ), 'length' => '0:32', ), ); } public function create() { if ( ! current_user_can( 'edit_theme_options' ) ) { wp_die( esc_html__( 'You are not allowed to create mega menu panels.', 'softicon-mega-menu' ) ); } check_admin_referer( 'almm_create_panel' ); $title = isset( $_POST['almm_name'] ) ? sanitize_text_field( wp_unslash( $_POST['almm_name'] ) ) : ''; if ( '' === $title ) { $title = __( 'Mega menu', 'softicon-mega-menu' ); } $id = wp_insert_post( array( 'post_type' => 'wp_template_part', 'post_status' => 'publish', 'post_title' => $title, 'post_name' => sanitize_title( $title ), 'post_content' => block::starter(), ), true ); if ( is_wp_error( $id ) ) { wp_die( esc_html( $id->get_error_message() ) ); } wp_set_object_terms( $id, get_stylesheet(), 'wp_theme' ); wp_set_object_terms( $id, 'menu', 'wp_template_part_area' ); // straight to designing it wp_safe_redirect( block::edit_url( get_stylesheet() . '//' . get_post_field( 'post_name', $id ) ) ); exit; } public function render() { $block_theme = wp_is_block_theme(); $panels = $block_theme ? get_block_templates( array( 'area' => 'menu' ), 'wp_template_part' ) : array(); ?>

videos() as $video ) : ?>

title ? $panel->title : $panel->slug ); ?> slug ); ?>