theme development - FSE Change Post Template to Something Other Than a List

admin管理员组

文章数量:1122832

I'm currently building a hybrid theme and am having trouble with my post template. It keeps rendering as an unordered list when what I want is a div structure. Is there any way to change it so that wp:post-template does not return a list?

Here is my template:

    <!-- wp:query {"queryId":17,"query":{"perPage":3,"pages":0,"offset":0,"postType":"work","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"layout":{"type":"constrained"}} -->
    <div class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
    <!-- wp:post-title /-->
    
    <!-- wp:post-date /-->
    <!-- /wp:post-template -->
    <!-- /wp:query -->

It renders like this:

  <div class="wp-block-query is-layout-constrained wp-block-query-is-layout-constrained">
    <ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow">
      <li class="wp-block-post post-8874 work type-work status-publish has-post-thumbnail hentry categories-apps">
          <h2 class="wp-block-post-title">test</h2>
          <div class="wp-block-post-date"><time datetime="2024-07-17T22:06:26-05:00">July 17, 2024</time></div>
       </li>
       ...
    </ul>
  </div>

What I want is something like this instead:

      <div class="wp-block-query is-layout-constrained wp-block-query-is-layout-constrained">
        <div class="myparentitem alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow">
          <div class="mychilditem wp-block-post post-8874 work type-work status-publish has-post-thumbnail hentry categories-apps">
              <h2 class="wp-block-post-title">test</h2>
              <div class="wp-block-post-date"><time datetime="2024-07-17T22:06:26-05:00">July 17, 2024</time></div>
           </div>
           ...
        </div>
      </div>

I'm currently building a hybrid theme and am having trouble with my post template. It keeps rendering as an unordered list when what I want is a div structure. Is there any way to change it so that wp:post-template does not return a list?

Here is my template:

    <!-- wp:query {"queryId":17,"query":{"perPage":3,"pages":0,"offset":0,"postType":"work","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"parents":[]},"layout":{"type":"constrained"}} -->
    <div class="wp-block-query"><!-- wp:post-template {"align":"wide"} -->
    <!-- wp:post-title /-->
    
    <!-- wp:post-date /-->
    <!-- /wp:post-template -->
    <!-- /wp:query -->

It renders like this:

  <div class="wp-block-query is-layout-constrained wp-block-query-is-layout-constrained">
    <ul class="alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow">
      <li class="wp-block-post post-8874 work type-work status-publish has-post-thumbnail hentry categories-apps">
          <h2 class="wp-block-post-title">test</h2>
          <div class="wp-block-post-date"><time datetime="2024-07-17T22:06:26-05:00">July 17, 2024</time></div>
       </li>
       ...
    </ul>
  </div>

What I want is something like this instead:

      <div class="wp-block-query is-layout-constrained wp-block-query-is-layout-constrained">
        <div class="myparentitem alignwide wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow">
          <div class="mychilditem wp-block-post post-8874 work type-work status-publish has-post-thumbnail hentry categories-apps">
              <h2 class="wp-block-post-title">test</h2>
              <div class="wp-block-post-date"><time datetime="2024-07-17T22:06:26-05:00">July 17, 2024</time></div>
           </div>
           ...
        </div>
      </div>

• theme-development
• block-editor
• full-site-editing

Share Improve this question edited Jul 19, 2024 at 1:55 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Jul 18, 2024 at 18:00 elkefreedelkefreed 38511 gold badge55 silver badges1616 bronze badges 2

• Just wondering - why can you not use the list tags? – birgire Commented Jul 18, 2024 at 20:04
• Just a preference. – elkefreed Commented Jul 22, 2024 at 18:35

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

The ul/li tags are hard-coded into the render_block_core_post_template() functíon:

$content = '';
    while ( $query->have_posts() ) {
        $query->the_post();
        $block_content = (
            new WP_Block(
                $block->parsed_block,
                array(
                    'postType' => get_post_type(),
                    'postId'   => get_the_ID(),
                )
            )
        )->render( array( 'dynamic' => false ) );
        $content      .= "<li>{$block_content}</li>";
    }

    wp_reset_postdata();

    return sprintf(
        '<ul %1$s>%2$s</ul>',
        $wrapper_attributes,
        $content
    );

See here:

https://github.com/WordPress/wordpress-develop/blob/bed9d00fbdac9da08ed13e84186c53a686a1ea78/src/wp-includes/blocks/post-template.php#L69

There would be a hacky way to modify the output via the render_block filter, but it might be better to work through the problem via CSS instead.

HTML is a semantic markup language, ie it describes the structure of the data. A post archive is a list of posts, so list markup is exactly what should be used. As far as styling goes, once you override the browser's default styles there's absolutely no difference between a <div> full of child <div>s and a <ul> full of <li>s. They're all block level elements, they have the same behaviour in the document flow.

本文标签： theme developmentFSE Change Post Template to Something Other Than a List