themes - what use have double styles in index.html?

admin管理员组

文章数量:1122832

I'm trying to understand how themes are constructed. One of the themes I've read has this in its templates/index.html:

<!-- wp:template-part {"slug":"header","theme":"themename","area":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":
{"top":"40px","bottom":"40px","left":"var:preset|spacing|40","right":"var:preset|
spacing|40"}}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<main
  class="wp-block-group"
  style="
    padding-top: 40px;
    padding-right: var(--wp--preset--spacing--40);
    padding-bottom: 40px;
    padding-left: var(--wp--preset--spacing--40);
  ">

  <!-- wp:group {"style":{"spacing":{"padding":{"left":"0","right":"0"}}},"layout":
{"type":"constrained","contentSize":"1240px"}} -->
  <div class="wp-block-group" style="padding-right: 0; padding-left: 0">
    <!-- wp:columns -->
    <div class="wp-block-columns">
    (…)

So, this is somehow the same, but … twice? What is the point of doing this?

I'm trying to understand how themes are constructed. One of the themes I've read has this in its templates/index.html:

<!-- wp:template-part {"slug":"header","theme":"themename","area":"header"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":
{"top":"40px","bottom":"40px","left":"var:preset|spacing|40","right":"var:preset|
spacing|40"}}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<main
  class="wp-block-group"
  style="
    padding-top: 40px;
    padding-right: var(--wp--preset--spacing--40);
    padding-bottom: 40px;
    padding-left: var(--wp--preset--spacing--40);
  ">

  <!-- wp:group {"style":{"spacing":{"padding":{"left":"0","right":"0"}}},"layout":
{"type":"constrained","contentSize":"1240px"}} -->
  <div class="wp-block-group" style="padding-right: 0; padding-left: 0">
    <!-- wp:columns -->
    <div class="wp-block-columns">
    (…)

So, this is somehow the same, but … twice? What is the point of doing this?

• themes
• templates

Share Improve this question asked Aug 3, 2024 at 13:46 rhavinrhavin 12166 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

The <!-- wp: tags are how the WordPress editor internal api control what has been generated on the page and it contains the data that is generated or controlled by the settings panel of the editor. In general, those settings are directly converted to some html / style that you see on the page but not always. That's why it seems duplicated. One is for the editor internal control and the other is for the browser to display. For more info about it, take a look at the Markup representation of a block of the Block Editor Handbook.

If you really want to understand it, I advise you to take a look at the technical overview introduction and the Key concepts from the Block Editor Handbook. The Handbook has a lot more of information and you should read it if you want a more in deep understanding of full site editing, blocks and block themes.

本文标签： themeswhat use have double styles in indexhtml