[{"data":1,"prerenderedAt":744},["ShallowReactive",2],{"navigation_docs":3,"-drupal-providing-blocks":221,"-drupal-providing-blocks-surround":739},[4,27,77,123,157,207],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Get started","majesticons:rocket-3-start-line","\u002Fget-started","1.get-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"How it works","\u002Fget-started\u002Fhow-it-works","1.get-started\u002F10.how-it-works",{"title":15,"path":16,"stem":17},"Play online","\u002Fget-started\u002Fplay-online","1.get-started\u002F20.play-online",{"title":19,"path":20,"stem":21},"Create a new project","\u002Fget-started\u002Fcreate-new-project","1.get-started\u002F30.create-new-project",{"title":23,"path":24,"stem":25},"First steps","\u002Fget-started\u002Ffirst-steps","1.get-started\u002F40.first-steps",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Guide","mdi:book-open-page-variant-outline","\u002Fguide","2.guide",[33,37,41,45,49,53,57,61,65,69,73],{"title":34,"path":35,"stem":36},"Customized API Output","\u002Fguide\u002Fcustomized-api-output","2.guide\u002F05.customized-api-output",{"title":38,"path":39,"stem":40},"Pages & Routing","\u002Fguide\u002Fpages-routing","2.guide\u002F10.pages-routing",{"title":42,"path":43,"stem":44},"Site layout & Menus","\u002Fguide\u002Fsite-layout-menus","2.guide\u002F20.site-layout-menus",{"title":46,"path":47,"stem":48},"Authentication","\u002Fguide\u002Fauthentication","2.guide\u002F40.authentication",{"title":50,"path":51,"stem":52},"Metatags & Local tasks","\u002Fguide\u002Fmetatags-local-tasks","2.guide\u002F50.metatags-local-tasks",{"title":54,"path":55,"stem":56},"Breadcrumbs & Messages","\u002Fguide\u002Fbreadcrumbs-messages","2.guide\u002F60.breadcrumbs-messages",{"title":58,"path":59,"stem":60},"Redirects","\u002Fguide\u002Fredirects","2.guide\u002F65.redirects",{"title":62,"path":63,"stem":64},"Editorial previews","\u002Fguide\u002Feditorial-previews","2.guide\u002F70.editorial-previews",{"title":66,"path":67,"stem":68},"Layout builder","\u002Fguide\u002Flayout-builder","2.guide\u002F80.layout-builder",{"title":70,"path":71,"stem":72},"Drupal Canvas","\u002Fguide\u002Fcanvas","2.guide\u002F90.canvas",{"title":74,"path":75,"stem":76},"Drupal CMS","\u002Fguide\u002Fdrupal-cms","2.guide\u002F95.drupal-cms",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Advanced topics","bi:diagram-3","\u002Fadvanced-topics","3.advanced-topics",[83,87,91,95,99,103,107,111,115,119],{"title":84,"path":85,"stem":86},"Multi-frontend","\u002Fadvanced-topics\u002Fmulti-frontend","3.advanced-topics\u002F05.multi-frontend",{"title":88,"path":89,"stem":90},"Listings, Views","\u002Fadvanced-topics\u002Flistings-views","3.advanced-topics\u002F10.listings-views",{"title":92,"path":93,"stem":94},"Searches","\u002Fadvanced-topics\u002Fsearches","3.advanced-topics\u002F20.searches",{"title":96,"path":97,"stem":98},"JSON-API & GraphQL","\u002Fadvanced-topics\u002Fjsonapi-graphql","3.advanced-topics\u002F30.jsonapi-graphql",{"title":100,"path":101,"stem":102},"Caching","\u002Fadvanced-topics\u002Fcaching","3.advanced-topics\u002F40.caching",{"title":104,"path":105,"stem":106},"Error pages","\u002Fadvanced-topics\u002Ferror-pages","3.advanced-topics\u002F50.error-pages",{"title":108,"path":109,"stem":110},"Drupal forms","\u002Fadvanced-topics\u002Fdrupal-forms","3.advanced-topics\u002F60.drupal-forms",{"title":112,"path":113,"stem":114},"Site Templates","\u002Fadvanced-topics\u002Fsite-templates","3.advanced-topics\u002F65.site-templates",{"title":116,"path":117,"stem":118},"Block layout","\u002Fadvanced-topics\u002Fblock-layout","3.advanced-topics\u002F70.block-layout",{"title":120,"path":121,"stem":122},"Debugging API requests","\u002Fadvanced-topics\u002Fdebugging","3.advanced-topics\u002F80.debugging",{"title":124,"icon":125,"path":126,"stem":127,"children":128,"page":26},"Drupal","simple-icons:drupal","\u002Fdrupal","4.drupal",[129,133,137,141,145,149,153],{"title":130,"path":131,"stem":132},"Key modules","\u002Fdrupal\u002Fkey-modules","4.drupal\u002F10.key-modules",{"title":134,"path":135,"stem":136},"Custom elements","\u002Fdrupal\u002Fcustom-elements","4.drupal\u002F20.custom-elements",{"title":138,"path":139,"stem":140},"Routes","\u002Fdrupal\u002Froutes","4.drupal\u002F30.routes",{"title":142,"path":143,"stem":144},"Providing blocks","\u002Fdrupal\u002Fproviding-blocks","4.drupal\u002F40.providing-blocks",{"title":146,"path":147,"stem":148},"Custom Element Processors","\u002Fdrupal\u002Fcustom-element-processors","4.drupal\u002F50.custom-element-processors",{"title":150,"path":151,"stem":152},"Adding Drupal forms","\u002Fdrupal\u002Fadd-drupal-forms","4.drupal\u002F60.add-drupal-forms",{"title":154,"path":155,"stem":156},"Providing themes","\u002Fdrupal\u002Fthemes","4.drupal\u002F70.themes",{"title":158,"icon":159,"path":160,"stem":161,"children":162,"page":26},"Nuxt","simple-icons:nuxtdotjs","\u002Fnuxt","5.nuxt",[163,167,171,175,179,183,187,191,195,199,203],{"title":164,"path":165,"stem":166},"Introduction","\u002Fnuxt\u002Fintroduction","5.nuxt\u002F10.introduction",{"title":168,"path":169,"stem":170},"Setup","\u002Fnuxt\u002Fsetup","5.nuxt\u002F20.setup",{"title":172,"path":173,"stem":174},"Rendering Custom Elements","\u002Fnuxt\u002Frender-custom-elements","5.nuxt\u002F30.render-custom-elements",{"title":176,"path":177,"stem":178},"Default components","\u002Fnuxt\u002Fdefault-components","5.nuxt\u002F32.default-components",{"title":180,"path":181,"stem":182},"Composables","\u002Fnuxt\u002Fcomposables","5.nuxt\u002F35.composables",{"title":184,"path":185,"stem":186},"Custom Routes","\u002Fnuxt\u002Fcustom-routes","5.nuxt\u002F40.custom-routes",{"title":188,"path":189,"stem":190},"Page Layouts","\u002Fnuxt\u002Fpage-layouts","5.nuxt\u002F50.page-layouts",{"title":192,"path":193,"stem":194},"Component Previews","\u002Fnuxt\u002Fcomponent-previews","5.nuxt\u002F55.component-previews",{"title":196,"path":197,"stem":198},"Rendering modes","\u002Fnuxt\u002Frendering-modes","5.nuxt\u002F60.rendering-modes",{"title":200,"path":201,"stem":202},"Deployment options","\u002Fnuxt\u002Fdeployment","5.nuxt\u002F70.deployment",{"title":204,"path":205,"stem":206},"Resources","\u002Fnuxt\u002Fresources","5.nuxt\u002F90.resources",{"title":208,"icon":209,"path":210,"stem":211,"children":212,"page":26},"Deployment","solar:server-square-cloud-linear","\u002Fdeployment","6.deployment",[213,217],{"title":214,"path":215,"stem":216},"Deployment Strategies","\u002Fdeployment\u002Fdeployment-strategy","6.deployment\u002F10.deployment-strategy",{"title":218,"path":219,"stem":220},"Unified Hosting","\u002Fdeployment\u002Funified-hosting","6.deployment\u002F20.unified-hosting",{"id":222,"title":142,"body":223,"description":733,"extension":734,"links":735,"meta":736,"navigation":261,"path":143,"seo":737,"stem":144,"__hash__":738},"docs\u002F4.drupal\u002F40.providing-blocks.md",{"type":224,"value":225,"toc":730},"minimark",[226,240,245,726],[227,228,229,230,234,235,239],"p",{},"In order to provide blocks that render into custom elements, for example for using as part of the ",[231,232,233],"a",{"href":67},"Layout Builder",", the block cannot directly return a custom element object, since its interface requires a render array. Instead, simply return the custom element as render array via its helper ",[236,237,238],"code",{},"toRenderArray()",". When done so, the custom element is going to be picked up correctly when the layout is rendered.",[241,242,244],"h2",{"id":243},"example-block","Example block",[246,247,252],"pre",{"className":248,"code":249,"language":250,"meta":251,"style":251},"language-php shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\n\u002F**\n * Provides an example news listing block.\n *\n * @Block(\n *   id = \"lupus_decoupled_drupal_example_news_listing\",\n *   admin_label = @Translation(\"Example news listing\"),\n *   category = @Translation(\"Custom\")\n * )\n *\u002F\nclass ExampleNewsListingBlock extends BlockBase {\n\n  \u002F**\n   * {@inheritdoc}\n   *\u002F\n  public function build() {\n    $articles[] = CustomElement::create('article-teaser')\n      ->setAttribute('href', 'https:\u002F\u002Fexample.com\u002Fnews\u002F1')\n      ->setAttribute('excerpt', 'The excerpt of the news entry.');\n    $articles[] = CustomElement::create('article-teaser')\n      ->setAttribute('href', 'https:\u002F\u002Fexample.com\u002Fnews\u002F2')\n      ->setAttribute('excerpt', 'The excerpt of another news entry.');\n\n    $teaser_listing = CustomElement::create('teaser-listing')\n      ->setAttribute('title', 'Latest news')\n      ->setAttribute('icon', 'news')\n      ->setSlotFromNestedElements('default', $articles);\n\n    \u002F\u002F Return the custom element as render array to fulfill the interface.\n    return $teaser_listing->toRenderArray();\n  }\n\n}\n","php","",[236,253,254,263,270,276,282,288,294,300,306,312,318,339,344,350,363,369,387,427,458,486,513,539,565,570,598,625,652,678,683,689,710,716,721],{"__ignoreMap":251},[255,256,259],"span",{"class":257,"line":258},"line",1,[255,260,262],{"emptyLinePlaceholder":261},true,"\n",[255,264,266],{"class":257,"line":265},2,[255,267,269],{"class":268},"sHwdD","\u002F**\n",[255,271,273],{"class":257,"line":272},3,[255,274,275],{"class":268}," * Provides an example news listing block.\n",[255,277,279],{"class":257,"line":278},4,[255,280,281],{"class":268}," *\n",[255,283,285],{"class":257,"line":284},5,[255,286,287],{"class":268}," * @Block(\n",[255,289,291],{"class":257,"line":290},6,[255,292,293],{"class":268}," *   id = \"lupus_decoupled_drupal_example_news_listing\",\n",[255,295,297],{"class":257,"line":296},7,[255,298,299],{"class":268}," *   admin_label = @Translation(\"Example news listing\"),\n",[255,301,303],{"class":257,"line":302},8,[255,304,305],{"class":268}," *   category = @Translation(\"Custom\")\n",[255,307,309],{"class":257,"line":308},9,[255,310,311],{"class":268}," * )\n",[255,313,315],{"class":257,"line":314},10,[255,316,317],{"class":268}," *\u002F\n",[255,319,321,325,329,332,335],{"class":257,"line":320},11,[255,322,324],{"class":323},"spNyl","class",[255,326,328],{"class":327},"sBMFI"," ExampleNewsListingBlock",[255,330,331],{"class":323}," extends",[255,333,334],{"class":327}," BlockBase",[255,336,338],{"class":337},"sMK4o"," {\n",[255,340,342],{"class":257,"line":341},12,[255,343,262],{"emptyLinePlaceholder":261},[255,345,347],{"class":257,"line":346},13,[255,348,349],{"class":268},"  \u002F**\n",[255,351,353,356,360],{"class":257,"line":352},14,[255,354,355],{"class":268},"   * {",[255,357,359],{"class":358},"svl4J","@inheritdoc",[255,361,362],{"class":268},"}\n",[255,364,366],{"class":257,"line":365},15,[255,367,368],{"class":268},"   *\u002F\n",[255,370,372,375,378,382,385],{"class":257,"line":371},16,[255,373,374],{"class":323},"  public",[255,376,377],{"class":323}," function",[255,379,381],{"class":380},"s2Zo4"," build",[255,383,384],{"class":337},"()",[255,386,338],{"class":337},[255,388,390,393,397,400,403,406,409,412,415,418,422,424],{"class":257,"line":389},17,[255,391,392],{"class":337},"    $",[255,394,396],{"class":395},"sTEyZ","articles",[255,398,399],{"class":337},"[]",[255,401,402],{"class":337}," =",[255,404,405],{"class":327}," CustomElement",[255,407,408],{"class":337},"::",[255,410,411],{"class":380},"create",[255,413,414],{"class":337},"(",[255,416,417],{"class":337},"'",[255,419,421],{"class":420},"sfazB","article-teaser",[255,423,417],{"class":337},[255,425,426],{"class":337},")\n",[255,428,430,433,436,438,440,443,445,448,451,454,456],{"class":257,"line":429},18,[255,431,432],{"class":337},"      ->",[255,434,435],{"class":380},"setAttribute",[255,437,414],{"class":337},[255,439,417],{"class":337},[255,441,442],{"class":420},"href",[255,444,417],{"class":337},[255,446,447],{"class":337},",",[255,449,450],{"class":337}," '",[255,452,453],{"class":420},"https:\u002F\u002Fexample.com\u002Fnews\u002F1",[255,455,417],{"class":337},[255,457,426],{"class":337},[255,459,461,463,465,467,469,472,474,476,478,481,483],{"class":257,"line":460},19,[255,462,432],{"class":337},[255,464,435],{"class":380},[255,466,414],{"class":337},[255,468,417],{"class":337},[255,470,471],{"class":420},"excerpt",[255,473,417],{"class":337},[255,475,447],{"class":337},[255,477,450],{"class":337},[255,479,480],{"class":420},"The excerpt of the news entry.",[255,482,417],{"class":337},[255,484,485],{"class":337},");\n",[255,487,489,491,493,495,497,499,501,503,505,507,509,511],{"class":257,"line":488},20,[255,490,392],{"class":337},[255,492,396],{"class":395},[255,494,399],{"class":337},[255,496,402],{"class":337},[255,498,405],{"class":327},[255,500,408],{"class":337},[255,502,411],{"class":380},[255,504,414],{"class":337},[255,506,417],{"class":337},[255,508,421],{"class":420},[255,510,417],{"class":337},[255,512,426],{"class":337},[255,514,516,518,520,522,524,526,528,530,532,535,537],{"class":257,"line":515},21,[255,517,432],{"class":337},[255,519,435],{"class":380},[255,521,414],{"class":337},[255,523,417],{"class":337},[255,525,442],{"class":420},[255,527,417],{"class":337},[255,529,447],{"class":337},[255,531,450],{"class":337},[255,533,534],{"class":420},"https:\u002F\u002Fexample.com\u002Fnews\u002F2",[255,536,417],{"class":337},[255,538,426],{"class":337},[255,540,542,544,546,548,550,552,554,556,558,561,563],{"class":257,"line":541},22,[255,543,432],{"class":337},[255,545,435],{"class":380},[255,547,414],{"class":337},[255,549,417],{"class":337},[255,551,471],{"class":420},[255,553,417],{"class":337},[255,555,447],{"class":337},[255,557,450],{"class":337},[255,559,560],{"class":420},"The excerpt of another news entry.",[255,562,417],{"class":337},[255,564,485],{"class":337},[255,566,568],{"class":257,"line":567},23,[255,569,262],{"emptyLinePlaceholder":261},[255,571,573,575,578,581,583,585,587,589,591,594,596],{"class":257,"line":572},24,[255,574,392],{"class":337},[255,576,577],{"class":395},"teaser_listing ",[255,579,580],{"class":337},"=",[255,582,405],{"class":327},[255,584,408],{"class":337},[255,586,411],{"class":380},[255,588,414],{"class":337},[255,590,417],{"class":337},[255,592,593],{"class":420},"teaser-listing",[255,595,417],{"class":337},[255,597,426],{"class":337},[255,599,601,603,605,607,609,612,614,616,618,621,623],{"class":257,"line":600},25,[255,602,432],{"class":337},[255,604,435],{"class":380},[255,606,414],{"class":337},[255,608,417],{"class":337},[255,610,611],{"class":420},"title",[255,613,417],{"class":337},[255,615,447],{"class":337},[255,617,450],{"class":337},[255,619,620],{"class":420},"Latest news",[255,622,417],{"class":337},[255,624,426],{"class":337},[255,626,628,630,632,634,636,639,641,643,645,648,650],{"class":257,"line":627},26,[255,629,432],{"class":337},[255,631,435],{"class":380},[255,633,414],{"class":337},[255,635,417],{"class":337},[255,637,638],{"class":420},"icon",[255,640,417],{"class":337},[255,642,447],{"class":337},[255,644,450],{"class":337},[255,646,647],{"class":420},"news",[255,649,417],{"class":337},[255,651,426],{"class":337},[255,653,655,657,660,662,664,667,669,671,674,676],{"class":257,"line":654},27,[255,656,432],{"class":337},[255,658,659],{"class":380},"setSlotFromNestedElements",[255,661,414],{"class":337},[255,663,417],{"class":337},[255,665,666],{"class":420},"default",[255,668,417],{"class":337},[255,670,447],{"class":337},[255,672,673],{"class":337}," $",[255,675,396],{"class":395},[255,677,485],{"class":337},[255,679,681],{"class":257,"line":680},28,[255,682,262],{"emptyLinePlaceholder":261},[255,684,686],{"class":257,"line":685},29,[255,687,688],{"class":268},"    \u002F\u002F Return the custom element as render array to fulfill the interface.\n",[255,690,692,696,698,701,704,707],{"class":257,"line":691},30,[255,693,695],{"class":694},"s7zQu","    return",[255,697,673],{"class":337},[255,699,700],{"class":395},"teaser_listing",[255,702,703],{"class":337},"->",[255,705,706],{"class":380},"toRenderArray",[255,708,709],{"class":337},"();\n",[255,711,713],{"class":257,"line":712},31,[255,714,715],{"class":337},"  }\n",[255,717,719],{"class":257,"line":718},32,[255,720,262],{"emptyLinePlaceholder":261},[255,722,724],{"class":257,"line":723},33,[255,725,362],{"class":337},[727,728,729],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .svl4J, html code.shiki .svl4J{--shiki-light:#F76D47;--shiki-light-font-style:italic;--shiki-default:#F78C6C;--shiki-default-font-style:italic;--shiki-dark:#F78C6C;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":251,"searchDepth":265,"depth":265,"links":731},[732],{"id":243,"depth":265,"text":244},"In order to provide blocks that render into custom elements, for example for using as part of the Layout Builder, the block cannot directly return a custom element object, since its interface requires a render array. Instead, simply return the custom element as render array via its helper toRenderArray(). When done so, the custom element is going to be picked up correctly when the layout is rendered.","md",null,{},{"title":142,"description":733},"q2GuNuejXzPkNPVJYiDbXEVnB--YqHuUsCBZXy3YRgA",[740,742],{"title":138,"path":139,"stem":140,"description":741,"children":-1},"The Lupus CE Renderer module takes care of rendering routes of the format custom_elements via Drupal's regular routing system. That means a route can be defined as usual in Drupal, additionally define the _format to be custom_elements:",{"title":146,"path":147,"stem":148,"description":743,"children":-1},"The custom elements module comes with Custom element processors that try to implement\na reasonable default for content entities and fields. These defaults can be\nfurther customized with custom modules as needed.",1776084718192]