Create HTML Block Type with Coder Role

Create a new block type called "HTML Code" (or something else we can agree upon)
Create a new text format called "HTML"
Create a new role called "Coder"

Considerations:

Show we allow ?</li> <li>Should we allow <script>?</li> <li>Should we allow <style>?</li> <li>If we allow <style>, should we provide a separate field that ensure the CSS is scoped to this particular block?</li> </ul> <p>Blocked by:</p> <h1>45 - need to enable Custom Blocks first</h1> <h1>46 - need block type permissions (including within Layout Builder)</h1> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <ul> <li>Show we allow <iframe>? Yes</li> <li>Should we allow <script>? Yes (or no and something like <a href="https://www.drupal.org/project/js_injector">https://www.drupal.org/project/js_injector</a> instead)</li> <li>Should we allow <style>? No</li> <li>If we allow <style>, should we provide a separate field that ensure the CSS is scoped to this particular block?</li> </ul> <p>Instead of allowing <style>, use <a href="https://www.drupal.org/project/field_css">https://www.drupal.org/project/field_css</a> or <a href="https://www.drupal.org/project/css_injector">https://www.drupal.org/project/css_injector</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>In D8, the JS/CSS injection family of modules are basically undeveloped. The direction seems to be toward an <a href="https://www.drupal.org/project/injector">Injector</a> module that handles both JS and CSS. No code yet, though.</p> <p>The <a href="https://www.drupal.org/project/cpn">Code per Node</a> project appears to be looking to <a href="https://www.drupal.org/node/2785655">deprecate itself</a> in favor of Injector, too.</p> <p>There may be opportunities in the contrib space for us. Otherwise, it may make more sense to code a custom solution, specific to this distribution.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p><a href="https://www.drupal.org/project/codemirror_editor">https://www.drupal.org/project/codemirror_editor</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Here is my current plan:</p> <p>HTML</p> <ul> <li>Create a custom block type with HTML field</li> <li>Use the CodeMirror widget provided by <a href="https://www.drupal.org/project/codemirror_editor">CodeMirror Editor</a></li> <li>Create a custom field formatter to render the raw HTML <ul> <li>Looked at <a href="https://www.drupal.org/project/html_field_formatter">HTML Field Formatter</a> - should be easy</li> </ul></li> <li>Create a text format where can apply input filters</li> <li>Configure custom field formatter to run raw HTML through text format</li> </ul> <p>CSS There's been no action on the Injector module, so I think we write something custom for our specific use case.</p> <ul> <li>In same custom block type, create a CSS field</li> <li>Use the CodeMirror widget provided by <a href="https://www.drupal.org/project/codemirror_editor">CodeMirror Editor</a></li> <li>Attach the CSS when the block is rendered</li> <li>CSS will be scoped to block</li> </ul> <p>JS Again, there's been no action on the Injector module.</p> <ul> <li>In same custom block type, create a JS field</li> <li>Use the CodeMirror widget provided by <a href="https://www.drupal.org/project/codemirror_editor">CodeMirror Editor</a></li> <li>Attach the JS when the block is rendered</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>What's the point of the "HTML Field Formatter" module? Isn't the HTML field just a "Text (formatted, long)" type with a text format that allows HTML?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Previously, on UNL Drupal 8....</p> <p>CSS field Used <a href="https://www.drupal.org/project/field_css">https://www.drupal.org/project/field_css</a></p> <p>Syntax highlighting Here's what I did before for syntax highlighting <a href="https://github.com/unlcms/unl_editor">https://github.com/unlcms/unl_editor</a> but using a prebuilt module like CodeMirror Editor would be preferable. Just noting this for my future reference.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Thoughts on Injector I haven't installed or used <a href="https://www.drupal.org/project/css_injector">https://www.drupal.org/project/css_injector</a> but if it's like the screenshots on <a href="https://www.drupal.org/project/js_injector">https://www.drupal.org/project/js_injector</a> then that accomplishes something different then what we're doing with a custom block. </p> <p>With a custom block we're trying to provide one little scoped package that is self contained in the custom block. One little widget where everything (HTML/CSS/JS) is edited together and output together.</p> <p>Injector looks more like classic blocks where you're writing some CSS or JS that lives on its own and then you can set the paths to include that on. This is possibly something to provide later on for "custom sites".</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I'll take a look at the Field CSS module. It looks like it's an incomplete D8 port. If it's useful, we could always take over maintainership.</p> <p>Re the custom field formatter (modeled after the HTML Field Formatter module), we need a way to render the raw HTML. By default, Drupal will escape it so it renders as text.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p><a href="https://www.drupal.org/project/jsfieldformatter">Javascript Field Formatter</a> could be useful if ported to D8</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Here's the new plan. We're using a custom block type (HTML Code) with two fields: HTML and CSS. CodeMirror is enabled for both. The CSS code is scoped to the block in question. JS and global CSS will be handled separately. This PR also adds a 'Coder' role. Two new modules are added: CodeMirror Editor and Field CSS.</p> <p>Note: CodeMirror will not load correctly in AJAX until the following PR for unl_five is merged: unlcms/unl_five#26</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Going fullscreen hides the codemirror editor behind the toolbar. </p> <img width="379" alt="fullscreen" src="https://user-images.githubusercontent.com/446357/85573822-d731b800-b5fb-11ea-81a8-09f0497047a1.png"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>Regarding the full screen issue screenshot above:</p> <p>Layout Builder Modal uses core modal functionality that utilizes JQuery UI's dialog. It looks at everything that has class "ui-front" and makes the modal's z-index one greater. However, the toolbar doesn't have "ui-front" (and my attempt at patching it to add "ui-front" didn't end up working anyway).</p> <p>(I was thinking that <a href="https://www.drupal.org/project/drupal/issues/2158943">https://www.drupal.org/project/drupal/issues/2158943</a> will impact things in a future 9.x release but on second thought I'm not so sure.)</p> <p>It looks like the "solution" in Seven & Bartik is simply <code>.ui-dialog {z-index:1260}</code> in their theme's dialog.css. I think that's the answer - an addition of dialog.css to unl_five with at least that rule in it.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ericras"><img src="https://avatars.githubusercontent.com/u/446357?v=4" />ericras</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>CSS does not insert nor update when in layout builder's preview mode as long as the CSS gets added to HEAD instead of BODY. A full save action is needed to see the results of the CSS. I don't think that's a blocker to move forward here. Issue on drupal.org: <a href="https://www.drupal.org/project/field_css/issues/3154655">https://www.drupal.org/project/field_css/issues/3154655</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I'm going to lookin into the Z-index issue and the Field CSS issues</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/macburgee1"><img src="https://avatars.githubusercontent.com/u/1521132?v=4" />macburgee1</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>The Field CSS module has been updated and now supports Layout Builder's live updates. Changes made to CSS field on the HTML Code block will now update immediately in life preview.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

unlcms / project-herbie

Create HTML Block Type with Coder Role #47