Consolidate PHP for Dev Blog article

[justintadlock]

Because of the limitations of the tutorial format, I think it'd be better to consolidate all the PHP (it's really only two functions) into the primary plugin.php file. This would let you get rid of some boilerplate stuff and simplify it. I've shared the code below.

I made a few other changes too:

• The <h2> for the admin page is now internationalized (shouldn't this be an <h1>?).
• You no longer need the PLUGIN_* constants (note that if you use these, they should be prefixed/namespaced).
• Used a variable for referencing the plugin directory path and URL.
• I added wp-components as a dependency for your style instead of enqueueing it separately.
• I prefixed your style handle with devblog- to match other prefixes used.

Anyway, the overall code will be easier to share in a Dev Blog tutorial because it will require fewer files and less setup for the reader.

plugin.php

<?php
/**
 * Plugin Name: Developer Blog: Dataviews Example
 * Description: A companion plugin for a WordPress Developer Blog article.
 * Version: 1.0.1
 * Requires at least: 6.1
 * Requires PHP: 7.4
 * Author: JuanMa Garrido
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 * Text Domain: dev-blog-dataviews-example
 */

defined( 'ABSPATH' ) || exit;

add_action( 'admin_menu', 'devblog_dataviews_admin_menu' );

function devblog_dataviews_admin_menu() {
    add_media_page(
        __( 'Add Media from third party service', 'dev-blog-dataviews-example' ),
        __( 'Add Media from third party service', 'dev-blog-dataviews-example' ),
        'manage_options',
        'add-media-from-third-party-service',
        function() {
            printf(
                '<h2>%s</h2><div id="add-media-from-third-party-service"></div>',
                esc_html__('Add Media from third party service', 'dev-blog-dataviews-example' )
            );
        }
    );
}

add_action( 'admin_enqueue_scripts', 'devblog_dataviews_admin_enqueue_assets' );

function devblog_dataviews_admin_enqueue_assets( $hook ) {
    // Load only on ?page=my-custom-dataview-app.
    if ( 'media_page_add-media-from-third-party-service' !== $hook ) {
        return;
    }

    $dir = plugin_dir_path( __FILE__ );
    $url = plugin_dir_url( __FILE__ );

    $asset_file = $dir . 'build/index.asset.php';

    if ( ! file_exists( $asset_file ) ) {
        return;
    }

    $asset = include $asset_file;

    wp_enqueue_script(
        'devblog-dataview-script',
        $url . 'build/index.js',
        $asset['dependencies'],
        $asset['version'],
        array(
            'in_footer' => true,
        )
    );

    wp_enqueue_style(
        'devblog-dataview-styles',
        $url . 'build/style-index.css',
        [ 'wp-components' ]
    );
}

[juanmaguitar]

Perfect! 👍 Thanks a lot for this feedback. The PHP code looks much cleaner and suitable for a blog post now.

[juanmaguitar]

@justintadlock, to avoid cache issues with CSS files, would it be correct to add the same $asset['version'] generated in the build process for JS files to the CSS files?

wp_enqueue_script(
        'devblog-dataview-script',
        $url . 'build/index.js',
        $asset['dependencies'],
        $asset['version'],
        array(
            'in_footer' => true,
        )
    );

    wp_enqueue_style(
        'devblog-dataview-styles',
        $url . 'build/style-index.css',
        array( 'wp-components' ),
        $asset['dependencies']
    );

[justintadlock]

Yes, you could definitely do that to get proper cache busting.

Edit: Note that your code references $asset['dependencies'] instead of $asset['version'].

[juanmaguitar]

Edit: Note that your code references $asset['dependencies'] instead of $asset['version'].

Yes, thanks for the heads up. I also noticed that and fixed it in my code (forgot to update the snippet here).