{"id":4965,"date":"2023-06-15T10:31:40","date_gmt":"2023-06-15T10:31:40","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=4965"},"modified":"2024-01-03T17:18:02","modified_gmt":"2024-01-03T17:18:02","slug":"the-details-and-summary-elements","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/the-details-and-summary-elements\/","title":{"rendered":"The Details and Summary Elements"},"content":{"rendered":"<p class=\"note icon-note\">Note: This post of understanding newly added WordPress Site Editor features on WordPress 6.3. This learning post is still in active development and updated regularly.<\/p>\n<p>Gutenberg 15.8 introduced the details\/summary block that allows to toggle the visibility of content, a feature similar to an\u00a0<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21584#issue-599805727\" target=\"_blank\" rel=\"noopener\">accordion<\/a>\u00a0block in the WordPress core. A good example use case of accordion block is the Block Editor\u00a0<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21584#issue-599805727\" target=\"_blank\" rel=\"noopener\">Settings sidebar sections<\/a>\u00a0and\u00a0<a href=\"https:\/\/codepen.io\/raubaca\/pen\/PZzpVe\" target=\"_blank\" rel=\"noopener\">this Codepen<\/a>\u00a0demonstration.<\/p>\n<p>This\u00a0<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/45055#issue-1412569898\" target=\"_blank\" rel=\"noopener\">GitHub ticket explains<\/a>\u00a0its structure of the\u00a0<code>&lt;details&gt;<\/code>\u00a0block, which contents two inner blocks:<\/p>\n<ul>\n<li>\n<div>Details summary: The <code>&lt;summary&gt;<\/code>: Uses richText. Its text defaults to &#8220;Details&#8221;. Activating or clicking on this element expands and closes the content.<\/div>\n<\/li>\n<li>\n<div>Details content: The content that is hidden and shown depending on whether the details are open is inside a <code>&lt;div&gt;<\/code>\u00a0below the\u00a0<code>&lt;summary&gt;<\/code>. The\u00a0<code>&lt;div&gt;<\/code>\u00a0contains a placeholder paragraph.<\/div>\n<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<p>This example shows the HTML structure of a simple\u00a0<code>&lt;details&gt;<\/code>\u00a0element with a\u00a0<code>&lt;summary&gt;<\/code>\u00a0element.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-markup\">&lt;details&gt;\n  &lt;summary&gt;Hello World!&lt;\/summary&gt;\n  &lt;p&gt;\n    Requires a computer running an operating system. The computer must have some\n    memory and ideally some kind of long-term storage. An input device as well\n    as some form of output device is recommended.\n  &lt;\/p&gt;\n&lt;\/details&gt;<\/code><\/pre>\n<p>The above HTML structure shows two blocks elements: <code>&lt;details&gt;<\/code> as parent block and\u00a0a\u00a0<code>&lt;summary&gt;<\/code> as its nested child element.\u00a0The <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/45055\" target=\"_blank\" rel=\"noopener\">original<\/a>, two-block structure, as shown above, allows you to edit and style the summary and the content separately.<\/p>\n<figure id=\"attachment_4967\" aria-describedby=\"caption-attachment-4967\" style=\"width: 1009px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-4967 size-full lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-editor.png\" alt=\"\" width=\"1009\" height=\"336\" \/><figcaption id=\"caption-attachment-4967\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"wp-image-4967 size-full lazyload\" src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-editor.png\" alt=\"\" width=\"1009\" height=\"336\" srcset=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-editor.png 1009w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-editor-300x100.png 300w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-editor-768x256.png 768w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-editor-200x67.png 200w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/noscript> Screenshot showing creating details block with the block editor<\/figcaption><\/figure>\n<p>The current details block (shown above) is <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/49808\">scaled-back<\/a> version that does not allow to customize the <code>&lt;summary&gt;<\/code> element with the Global Style design tools available. It requires the use of custom CSS instead.<\/p>\n<figure id=\"attachment_4966\" aria-describedby=\"caption-attachment-4966\" style=\"width: 723px\" class=\"wp-caption alignnone\"><img decoding=\"async\" class=\"wp-image-4966 size-full lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block.png\" alt=\"\" width=\"723\" height=\"123\" \/><figcaption id=\"caption-attachment-4966\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"wp-image-4966 size-full lazyload\" src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block.png\" alt=\"\" width=\"723\" height=\"123\" srcset=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block.png 723w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-300x51.png 300w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2023\/06\/details-block-200x34.png 200w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><\/noscript> Screenshot showing closed state (left) and Open state (right)<\/figcaption><\/figure>\n<p dir=\"auto\">As shown in the above screenshot, the details block has open and closed feature.<\/p>\n<ul dir=\"auto\">\n<li>In the editor, the details block default can be set as open \/ expanded.<\/li>\n<li>The default behavior of opening and closing the details with click, Space end Enter keys is disabled in the editor.<\/li>\n<\/ul>\n<h5>Styling Details\/Summary Block<\/h5>\n<p>The current details block (shown above) is <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/49808\">scaled-back<\/a> version that does not allow to customize the <code>&lt;summary&gt;<\/code> element with the Global Style design tools available. It requires the use of custom CSS instead.<\/p>\n<p>This <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/details\">MDN doc<\/a> explains how to style the details and summary elements using custom CSS.<\/p>\n<h6>Additional Readings<\/h6>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/details\">&lt;details&gt;: The Details disclosure element<\/a> | MDN Documents<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/developer-blog-content\/discussions\/104\">Tutorial on building patterns and block styles with Details\/Summary block #104<\/a> | WordPress Dev Blog<\/li>\n<li><a href=\"https:\/\/webdesign.tutsplus.com\/tutorials\/explaining-the-details-and-summary-elements--cms-21999\">Explaining the \u201cDetails\u201d and \u201cSummary\u201d Elements<\/a> | EnvatoTuts<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/45055\">Add Details\/summary block<\/a> | GitHub Pull request #45055<\/li>\n<li><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/49808\">More intuitive Details block with summary and innerBlocks content<\/a> | GitHub Pull Requests #49808<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post of understanding newly added WordPress Site Editor features on WordPress 6.3. This learning post is still in active development and updated regularly. Gutenberg 15.8 introduced the details\/summary block that allows to toggle the visibility of content, a feature similar to an\u00a0accordion\u00a0block in the WordPress core. A good example use case of accordion [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[27,6],"tags":[],"class_list":["post-4965","post","type-post","status-publish","format-standard","hentry","category-full-site-editing","category-gutenberg"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=4965"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/4965\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=4965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=4965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=4965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}