Adds an endpoints that returns a list of font families used by a theme

matiasbenedetto commented 1 month ago

What?

Adds an endpoint (/wp-json/create-block-theme/v1/font-families) that returns a list of font families used by a theme, including their style variants.

Why?

We need to know in the frontend which are all the fonts used in a theme including the theme variants.
The endpoint returns all the font paths as absolute URLs to avoid guessing the absolute urls in the frontend.
This is part of the effort to re-introduce the font license theme automation (https://github.com/WordPress/create-block-theme/issues/525).

Example:

With TT4 theme activated you should get an answer like this from the endpoint /wp-json/create-block-theme/v1/font-families:


{
   "status":"SUCCESS",
   "message":"Font Families retrieved.",
   "data":[
      {
         "fontFace":[
            {
               "fontFamily":"Inter",
               "fontStretch":"normal",
               "fontStyle":"normal",
               "fontWeight":"300 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/inter\/Inter-VariableFont_slnt,wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Inter\", sans-serif",
         "name":"Inter",
         "slug":"body"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Cardo",
               "fontStyle":"normal",
               "fontWeight":"400",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_normal_400.woff2"
               ]
            },
            {
               "fontFamily":"Cardo",
               "fontStyle":"italic",
               "fontWeight":"400",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_italic_400.woff2"
               ]
            },
            {
               "fontFamily":"Cardo",
               "fontStyle":"normal",
               "fontWeight":"700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_normal_700.woff2"
               ]
            }
         ],
         "fontFamily":"Cardo",
         "name":"Cardo",
         "slug":"heading"
      },
      {
         "fontFamily":"-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
         "name":"System Sans-serif",
         "slug":"system-sans-serif"
      },
      {
         "fontFamily":"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
         "name":"System Serif",
         "slug":"system-serif"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Instrument Sans",
               "fontStyle":"normal",
               "fontWeight":"400 700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/instrument-sans\/InstrumentSans-VariableFont_wdth,wght.woff2"
               ]
            },
            {
               "fontFamily":"Instrument Sans",
               "fontStyle":"italic",
               "fontWeight":"400 700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/instrument-sans\/InstrumentSans-Italic-VariableFont_wdth,wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Instrument Sans\", sans-serif",
         "name":"Instrument Sans",
         "slug":"body"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Jost",
               "fontStyle":"normal",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-VariableFont_wght.woff2"
               ]
            },
            {
               "fontFamily":"Jost",
               "fontStyle":"italic",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-Italic-VariableFont_wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Jost\", sans-serif",
         "name":"Jost",
         "slug":"heading"
      },
      {
         "fontFamily":"-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
         "name":"System Sans-serif",
         "slug":"system-sans-serif"
      },
      {
         "fontFamily":"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
         "name":"System Serif",
         "slug":"system-serif"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Inter",
               "fontStretch":"normal",
               "fontStyle":"normal",
               "fontWeight":"300 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/inter\/Inter-VariableFont_slnt,wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Inter\", sans-serif",
         "name":"Inter",
         "slug":"heading"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Cardo",
               "fontStyle":"normal",
               "fontWeight":"400",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_normal_400.woff2"
               ]
            },
            {
               "fontFamily":"Cardo",
               "fontStyle":"italic",
               "fontWeight":"400",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_italic_400.woff2"
               ]
            },
            {
               "fontFamily":"Cardo",
               "fontStyle":"normal",
               "fontWeight":"700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_normal_700.woff2"
               ]
            }
         ],
         "fontFamily":"Cardo",
         "name":"Cardo",
         "slug":"body"
      },
      {
         "fontFamily":"-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
         "name":"System Sans-serif",
         "slug":"system-sans-serif"
      },
      {
         "fontFamily":"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
         "name":"System Serif",
         "slug":"system-serif"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Inter",
               "fontStretch":"normal",
               "fontStyle":"normal",
               "fontWeight":"300 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/inter\/Inter-VariableFont_slnt,wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Inter\", sans-serif",
         "name":"Inter",
         "slug":"heading"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Jost",
               "fontStyle":"normal",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-VariableFont_wght.woff2"
               ]
            },
            {
               "fontFamily":"Jost",
               "fontStyle":"italic",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-Italic-VariableFont_wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Jost\", sans-serif",
         "name":"Jost",
         "slug":"body"
      },
      {
         "fontFamily":"-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
         "name":"System Sans-serif",
         "slug":"system-sans-serif"
      },
      {
         "fontFamily":"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
         "name":"System Serif",
         "slug":"system-serif"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Cardo",
               "fontStyle":"normal",
               "fontWeight":"400",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_normal_400.woff2"
               ]
            },
            {
               "fontFamily":"Cardo",
               "fontStyle":"italic",
               "fontWeight":"400",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_italic_400.woff2"
               ]
            },
            {
               "fontFamily":"Cardo",
               "fontStyle":"normal",
               "fontWeight":"700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/cardo\/cardo_normal_700.woff2"
               ]
            }
         ],
         "fontFamily":"Cardo",
         "name":"Cardo",
         "slug":"body"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Jost",
               "fontStyle":"normal",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-VariableFont_wght.woff2"
               ]
            },
            {
               "fontFamily":"Jost",
               "fontStyle":"italic",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-Italic-VariableFont_wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Jost\", sans-serif",
         "name":"Jost",
         "slug":"heading"
      },
      {
         "fontFamily":"-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
         "name":"System Sans-serif",
         "slug":"system-sans-serif"
      },
      {
         "fontFamily":"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
         "name":"System Serif",
         "slug":"system-serif"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Instrument Sans",
               "fontStyle":"normal",
               "fontWeight":"400 700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/instrument-sans\/InstrumentSans-VariableFont_wdth,wght.woff2"
               ]
            },
            {
               "fontFamily":"Instrument Sans",
               "fontStyle":"italic",
               "fontWeight":"400 700",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/instrument-sans\/InstrumentSans-Italic-VariableFont_wdth,wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Instrument Sans\", sans-serif",
         "name":"Instrument Sans",
         "slug":"heading"
      },
      {
         "fontFace":[
            {
               "fontFamily":"Jost",
               "fontStyle":"normal",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-VariableFont_wght.woff2"
               ]
            },
            {
               "fontFamily":"Jost",
               "fontStyle":"italic",
               "fontWeight":"100 900",
               "src":[
                  "http:\/\/localhost\/wp1\/wp-content\/themes\/twentytwentyfour\/assets\/fonts\/jost\/Jost-Italic-VariableFont_wght.woff2"
               ]
            }
         ],
         "fontFamily":"\"Jost\", sans-serif",
         "name":"Jost",
         "slug":"body"
      },
      {
         "fontFamily":"-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif",
         "name":"System Sans-serif",
         "slug":"system-sans-serif"
      },
      {
         "fontFamily":"Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
         "name":"System Serif",
         "slug":"system-serif"
      }
   ]
}

matiasbenedetto commented 1 month ago

Does adding its own endpoint mean that there is data that cannot be obtained using the core API alone? Looks like __experimentalGetCurrentThemeGlobalStylesVariations has the information we need.

Something that is different in this endpoint than in __experimentalGetCurrentThemeGlobalStylesVariations is that the font paths are absolute. I haven't found a good way to guess the theme URL from the frontend.

pbking commented 1 month ago

Does adding its own endpoint mean that there is data that cannot be obtained using the core API alone?

I think the frontend could cobble together the data using that and other APIs but I agree it's nice to have everything packaged nicely and ready-to-go with this one API addition.

pbking commented 1 month ago

I added some unit tests and merged trunk to fix some conflicts.

I think this is good to bring in and focus on the last branch.

WordPress / create-block-theme