WordPress / wporg-parent-2021

17 stars 10 forks source link

Update card grid style to work with LinkWrapper blocks #109

Closed adamwoodnz closed 11 months ago

adamwoodnz commented 11 months ago

Currently the grid expects children to have markup like:

<!-- wp:heading {"level":3,"fontSize":"small","fontFamily":"inter"} -->
<h3 class="wp-block-heading has-inter-font-family has-small-font-size">
    <a href="https://developer.wordpress.org/apis">
        <strong><?php esc_html_e( 'Common APIs', 'wporg' ); ?></strong><?php esc_html_e( 'Interested in interacting with various APIs?', 'wporg' ); ?>
    </a>
</h3>
<!-- /wp:heading -->

However this isn't ideal because the output text has the 'title' and 'description' jammed together for anything that disregards the strong tag. A better html structure is to wrap separate elements in an anchor tag. We have a block in mu-plugins which does exactly this, the LinkWrapper:

<!-- wp:wporg/link-wrapper -->
<a class="wp-block-wporg-link-wrapper" href="https://make.wordpress.org/cli/">
    <!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}},"fontSize":"small","fontFamily":"inter"} -->
    <h3 class="wp-block-heading has-inter-font-family has-small-font-size" id="cli-handbook" style="font-style:normal;font-weight:700"><?php esc_html_e( 'CLI Handbook', 'wporg' ); ?></h3>
    <!-- /wp:heading -->

    <!-- wp:paragraph {"fontSize":"small"} -->
    <p class="has-small-font-size"><?php esc_html_e( 'A collection of helpful guides and resources for using WP-CLI.', 'wporg' ); ?></p>
    <!-- /wp:paragraph -->
</a>
<!-- /wp:wporg/link-wrapper -->

We need to update the styles to expect this markup instead.

The style should remain the same, eg.

Screenshot 2023-09-22 at 4 51 28 PM