WP_Theme_JSON_Gutenberg: Add nested indexed array schema sanitization

[matiasbenedetto]

What?

• Add nested indexed array schema sanitization capabilities to the WP_Theme_JSON_Gutenberg class.
• Add settings.typography.fontFamilies validation in WP_Theme_JSON_Gutenberg
• Add unit tests.

This is an alternative approach to #53273, and hopefully fixes: #52798

Co-authrored by: @jffng

Why?

To sanitize data stored in indexed arrays, for example, font family definitions. Without this PR, that's not possible.

Currently, WP_Theme_JSON sanitization is not able to sanitize data contained on indexed arrays. So certain data from theme.json, for example, settings.typography.fontFamilies which is a JSON array, cannot be sanitized because when parsing the JSON dataWP_Theme_JSON translates JSON arrays into PHP indexed arrays and the class is not capable of sanitizing that kind of data.

How?

Treating the associative arrays and indexed arrays differently.

Testing Instructions

1. Run the PHP unit tests:
   npm run test:unit:php
2. Check that there are no failures.

---

1. Add the following snippet to a PHP file, for example, to your theme's functions.php file.
2. Check that the unwanted keys are removed from the output data.

$theme_data = array(
  'version'  => '2',
  'badKey2' => 'I am Evil!!!!',
  'settings' => array(
    'badKey2' => 'I am Evil!!!!',
    'typography' => array(
      'badKey3' => 'I am Evil!!!!',
      'fontFamilies' => array(
        array (
            'badKey4' => 'I am Evil!!!!',
            'name'       => 'Piazzolla',
            'slug'       => 'piazzolla',
            'fontFamily' => 'Piazzolla',
            'fontFace'   => [
              array(
                'badKey5' => 'I am Evil!!!!',
                'fontFamily' => 'Piazzolla',
                'fontStyle'  => 'italic',
                'fontWeight' => '400',
                'src'        => 'https://example.com/font.ttf',
              ),
              array(
                'badKey5' => 'I am Evil!!!!',
                'fontFamily' => 'Piazzolla',
                'fontStyle'  => 'italic',
                'fontWeight' => '400',
                'src'        => 'https://example.com/font.ttf',
              ),
              array(
                'badKey5' => 'I am Evil!!!!',
                'fontFamily' => 'Piazzolla',
                'fontStyle'  => 'italic',
                'fontWeight' => '400',
                'src'        => 'https://example.com/font.ttf',
              ),
            ],
        ),
        array (
            'badKey4' => 'I am Evil!!!!',
            'name'       => 'Inter',
            'slug'       => 'Inter',
            'fontFamily' => 'Inter',
            'fontFace'   => [
              array(
                'badKey5' => 'I am Evil!!!!',
                'fontFamily' => 'Inter',
                'fontStyle'  => 'italic',
                'fontWeight' => '400',
                'src'        => 'https://example.com/font.ttf',
              ),
              array(
                'badKey5' => 'I am Evil!!!!',
                'fontFamily' => 'Inter',
                'fontStyle'  => 'italic',
                'fontWeight' => '400',
                'src'        => 'https://example.com/font.ttf',
              ),
              array(
                'fontFamily' => 'Inter',
                'fontStyle'  => 'italic',
                'fontWeight' => '400',
                'src'        => 'https://example.com/font.ttf',
              ),
            ],
        )
      )
    ),
  ),
);
// Creates a new WP_Theme_JSON object with the new fonts to leverage sanitization and validation.
$theme_json = new WP_Theme_JSON_Gutenberg( $theme_data );
$data       = $theme_json->get_data();

echo('<pre>');
print_r($data);
echo('</pre>');

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/class-wp-theme-json-gutenberg.php
❔ phpunit/class-wp-theme-json-test.php

[jffng]

I think this is a better solution than #53273 because it adds less complexity, and is more extensible in case we want to add more sanitization to keys containing indexed arrays.

I tested this according to the instructions, as well as modifying some tests in the Tests_Fonts_WPRESTFontLibraryController_InstallFonts and ensuring that the sanitization is working as expected.

We should keep an eye on any related unit tests after this is merged.

[getdave]

@matiasbenedetto Can you confirm you will backport this as part of the Fonts backport process, or shall we commit this separately?

[matiasbenedetto]

@getdave 👋 nope, I think it's convenient to sync-up this in the core repo in a different PR. This functionality is useful not just for font families related settings, but for any indexed array we want to sanitize inside WP_Theme_JSON.