-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c6850c0
commit 51c1abc
Showing
4 changed files
with
317 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,230 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
|
|
||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Drupal and travelling"> | ||
|
|
||
| <title>Custom blocks in Drupal 8 - Miro Michalicka</title> | ||
|
|
||
| <link rel="canonical" href="http://yourdomain.com/2015/12/17/custom-blocks/"> | ||
|
|
||
| <!-- Bootstrap Core CSS --> | ||
| <link rel="stylesheet" href="/css/bootstrap.min.css"> | ||
|
|
||
| <!-- Custom CSS --> | ||
| <link rel="stylesheet" href="/css/clean-blog.css"> | ||
|
|
||
| <!-- Pygments Github CSS --> | ||
| <link rel="stylesheet" href="/css/syntax.css"> | ||
|
|
||
| <!-- Custom Fonts --> | ||
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> | ||
| <link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> | ||
| <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> | ||
|
|
||
| <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> | ||
| <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> | ||
| <!--[if lt IE 9]> | ||
| <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> | ||
| <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> | ||
| <![endif]--> | ||
|
|
||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
|
|
||
| ga('create', 'UA-71161542-1', 'auto'); | ||
| ga('send', 'pageview'); | ||
| </script> | ||
| </head> | ||
|
|
||
|
|
||
| <body> | ||
|
|
||
| <!-- Navigation --> | ||
| <nav class="navbar navbar-default navbar-custom navbar-fixed-top"> | ||
| <div class="container-fluid"> | ||
| <!-- Brand and toggle get grouped for better mobile display --> | ||
| <div class="navbar-header page-scroll"> | ||
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> | ||
| <span class="sr-only">Toggle navigation</span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| <span class="icon-bar"></span> | ||
| </button> | ||
| <a class="navbar-brand" href="/">Miro Michalicka</a> | ||
| </div> | ||
| </div> | ||
| <!-- /.container --> | ||
| </nav> | ||
|
|
||
|
|
||
| <!-- Post Header --> | ||
| <header class="intro-header" style="background-image: url('/img/post-bg-07.png')"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <div class="post-heading"> | ||
| <h1>Custom blocks in Drupal 8</h1> | ||
|
|
||
| <h2 class="subheading">CMI won't stop you</h2> | ||
|
|
||
| <span class="meta">Posted on December 17, 2015</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
|
|
||
| <!-- Post Content --> | ||
| <article> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
|
|
||
| <p>You have probably notices that CMI has some limitation in exporting custom blocks. These are unfortunately quite important for Front enders and also for client. Let me show you, how you can simply create custom blocks in code during installation of your module.</p> | ||
|
|
||
| <p>If you are reading this blog, I assume you know that blocks are finally entities in Drupal 8. You can define your own block type and add some fields into it. For simple demonstration I’m using predefined custom block type Basic block with body text field. Same approach can be of course used for your custom block types with many additional fiels.</p> | ||
|
|
||
| <p>First you need to create Custom block:</p> | ||
|
|
||
| <figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="lineno"> 1</span> <span class="cp"><?php</span> | ||
| <span class="lineno"> 2</span> | ||
| <span class="lineno"> 3</span> <span class="k">use</span> <span class="nx">Drupal\block_content\Entity\BlockContent</span><span class="p">;</span> | ||
| <span class="lineno"> 4</span> | ||
| <span class="lineno"> 5</span> <span class="sd">/**</span> | ||
| <span class="lineno"> 6</span> <span class="sd"> * Implements hook_install().</span> | ||
| <span class="lineno"> 7</span> <span class="sd"> */</span> | ||
| <span class="lineno"> 8</span> <span class="k">function</span> <span class="nf">awesome_blocks_install</span><span class="p">()</span> <span class="p">{</span> | ||
| <span class="lineno"> 9</span> <span class="nv">$block_content</span> <span class="o">=</span> <span class="nx">BlockContent</span><span class="o">::</span><span class="na">create</span><span class="p">([</span> | ||
| <span class="lineno">10</span> <span class="s1">'type'</span> <span class="o">=></span> <span class="s1">'basic'</span><span class="p">,</span> | ||
| <span class="lineno">11</span> <span class="s1">'info'</span> <span class="o">=></span> <span class="s1">'About us'</span><span class="p">,</span> | ||
| <span class="lineno">12</span> <span class="p">]);</span> | ||
| <span class="lineno">13</span> <span class="nv">$block_content</span><span class="o">-></span><span class="na">set</span><span class="p">(</span><span class="s1">'body'</span><span class="p">,</span> <span class="s1">'Some long text about us...'</span><span class="p">);</span> | ||
| <span class="lineno">14</span> <span class="nv">$block_content</span><span class="o">-></span><span class="na">save</span><span class="p">();</span> | ||
| <span class="lineno">15</span> <span class="p">}</span></code></pre></figure> | ||
|
|
||
| <p>If you install your module now, you can find this block in <a href="http://your-domain.tld/admin/structure/block/block-content/types">Custom block library</a>. You can update all fields which is big change since Drupal 7, but you still need to show your block somewhere on page. Because block are entities, they can be displayed multiple times. You need to create block instance which can be placed into region and visibility settings can be applied. </p> | ||
|
|
||
| <figure class="highlight"><pre><code class="language-php" data-lang="php"><span class="cp"><?php</span> | ||
|
|
||
| <span class="k">use</span> <span class="nx">Drupal\block\Entity\Block</span><span class="p">;</span> | ||
| <span class="k">use</span> <span class="nx">Drupal\block_content\Entity\BlockContent</span><span class="p">;</span> | ||
|
|
||
| <span class="sd">/**</span> | ||
| <span class="sd"> * Implements hook_install().</span> | ||
| <span class="sd"> */</span> | ||
| <span class="k">function</span> <span class="nf">awesome_blocks_install</span><span class="p">()</span> <span class="p">{</span> | ||
| <span class="nv">$block_content</span> <span class="o">=</span> <span class="nx">BlockContent</span><span class="o">::</span><span class="na">create</span><span class="p">([</span> | ||
| <span class="s1">'type'</span> <span class="o">=></span> <span class="s1">'basic'</span><span class="p">,</span> | ||
| <span class="s1">'info'</span> <span class="o">=></span> <span class="s1">'About us'</span><span class="p">,</span> | ||
| <span class="p">]);</span> | ||
| <span class="nv">$block_content</span><span class="o">-></span><span class="na">set</span><span class="p">(</span><span class="s1">'body'</span><span class="p">,</span> <span class="s1">'Some long text about us...'</span><span class="p">);</span> | ||
| <span class="nv">$block_content</span><span class="o">-></span><span class="na">save</span><span class="p">();</span> | ||
|
|
||
| <span class="nv">$block</span> <span class="o">=</span> <span class="nx">Block</span><span class="o">::</span><span class="na">create</span><span class="p">([</span> | ||
| <span class="s1">'id'</span> <span class="o">=></span> <span class="s1">'about_us'</span><span class="p">,</span> | ||
| <span class="s1">'plugin'</span> <span class="o">=></span> <span class="s1">'block_content:'</span> <span class="o">.</span> <span class="nv">$block_content</span><span class="o">-></span><span class="na">uuid</span><span class="p">(),</span> | ||
| <span class="s1">'region'</span> <span class="o">=></span> <span class="s1">'header'</span><span class="p">,</span> | ||
| <span class="s1">'provider'</span> <span class="o">=></span> <span class="s1">'block_content'</span><span class="p">,</span> | ||
| <span class="s1">'weight'</span> <span class="o">=></span> <span class="o">-</span><span class="mi">100</span><span class="p">,</span> | ||
| <span class="s1">'theme'</span> <span class="o">=></span> <span class="nx">\Drupal</span><span class="o">::</span><span class="na">config</span><span class="p">(</span><span class="s1">'system.theme'</span><span class="p">)</span><span class="o">-></span><span class="na">get</span><span class="p">(</span><span class="s1">'default'</span><span class="p">),</span> | ||
| <span class="s1">'visibility'</span> <span class="o">=></span> <span class="k">array</span><span class="p">(),</span> | ||
| <span class="s1">'settings'</span> <span class="o">=></span> <span class="p">[</span> | ||
| <span class="s1">'label'</span> <span class="o">=></span> <span class="s1">'About us'</span><span class="p">,</span> | ||
| <span class="s1">'label_display'</span> <span class="o">=></span> <span class="k">FALSE</span><span class="p">,</span> | ||
| <span class="p">],</span> | ||
| <span class="p">]);</span> | ||
| <span class="nv">$block</span><span class="o">-></span><span class="na">save</span><span class="p">();</span> | ||
| <span class="p">}</span></code></pre></figure> | ||
|
|
||
| <p>Now you just need to put this code into your module’s .install file and enable it. Enjoy :)</p> | ||
|
|
||
|
|
||
| <hr> | ||
|
|
||
| <ul class="pager"> | ||
|
|
||
| <li class="previous"> | ||
| <a href="/2015/12/07/views-twig/" data-toggle="tooltip" data-placement="top" title="Twig inside Views in Drupal 8">← Previous Post</a> | ||
| </li> | ||
|
|
||
|
|
||
| </ul> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| <hr> | ||
|
|
||
|
|
||
| <!-- Footer --> | ||
| <footer> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> | ||
| <ul class="list-inline text-center"> | ||
| <li> | ||
| <a href="/feed.xml"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-rss fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
|
|
||
| <li> | ||
| <a href="https://twitter.com/miromichalicka"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
|
|
||
|
|
||
|
|
||
| <li> | ||
| <a href="https://github.com/miromichalicka"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-github fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
|
|
||
| <li> | ||
| <a href="https://sk.linkedin.com/in/michalicka"> | ||
| <span class="fa-stack fa-lg"> | ||
| <i class="fa fa-circle fa-stack-2x"></i> | ||
| <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i> | ||
| </span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
|
|
||
| <!-- jQuery --> | ||
| <script src="/js/jquery.min.js "></script> | ||
|
|
||
| <!-- Bootstrap Core JavaScript --> | ||
| <script src="/js/bootstrap.min.js "></script> | ||
|
|
||
| <!-- Custom Theme JavaScript --> | ||
| <script src="/js/clean-blog.min.js "></script> | ||
|
|
||
|
|
||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.