Load Gutenberg Styles inside plugin settings page

When creating a plugin settings page using @wordpress/scripts components, you may notice that the styles of your components do not match those in the Gutenberg editor. This happens because the Gutenberg editor styles are not automatically loaded outside the editor interface.

To ensure consistency in appearance, you need to manually load the necessary styles when the Gutenberg editor is not present. This typically involves enqueuing the appropriate stylesheets in your plugin settings page.

<?php

wp_enqueue_style(
    'wp-editor',
    includes_url('css/dist/editor/style.css'),
    [],
    file_exists(ABSPATH . 'wp-includes/css/dist/editor/style.css') ? filemtime(ABSPATH . 'wp-includes/css/dist/editor/style.css') : '6.0' // Default version fallback
);

Alternative Approach Using Built-in Styles:

Instead of manually specifying the file path, you can use built-in WordPress styles:

wp_enqueue_style('wp-edit-blocks'); // Loads core Gutenberg styles
wp_enqueue_style('wp-components');  // Loads WP component styles