what use have double styles in index.html?

Question

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?

Answer 1

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.