I am trying to setup the footer.html template part of my custom block theme for Wordpress.
The template part looks like this:
<footer>
<div class="footer__grid">
<div class="footer__left-space"></div>
<div class="footer_left-block"></div>
<div class="footer__widgets">
<!-- wp:group -->
<div class="wp-block-group"></div>
<!-- /wp:group -->
</div>
<div class="footer__right-section"></div>
</div>
</footer>
I would like to be able to insert blocks in the wp:group area, which should then be rendered inside of the footer__widgets element (see html above). The blocks I have set up for this particular wp:group section look like this:
As you can see in the image, it already gives me a This block has encountered an error and cannot be previewed.
Second, the html gets rendered as follows, outside of footer__widgets:
Main question:
How can I make sure the blocks from wp:group get rendered inside of the div.footer__widgets element?
Side question:
Am I doing wrong and/or misusing Wordpress' new Block Theme functionality, also with regards to the error message in the first image?
Related
I don't have a codepen to reproduce this cause it's more of a WordPress issue than a fullpage.js issue. I have a client that has a WP site and wants to integrate fullpage scrolling on their homepage. I have successfully integrated fullpage.js into it, and it works as expected (no plugins). My problem is that I cannot seem to find a way to include the footer. I have given it the "section" and "fp-auto-height" classes, as the documentation suggests, but it still isn't showing. I realized that the footer was outside the fullpage div I created, since fullpage.js is only for the front page, so I tried wrapping the <? get_footer(); ?> on the front page within the fullpage div, which actually wraps it in the DOM, and the additional styling/divs (that are automatically applied by fullpage.js) were applied to the footer section, however, it still wasn't showing. Essentially it looked like this:
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<? get_footer(); ?>
</div>
and within footer.php I have this:
<footer class="section fp-auto-height">
//content
</footer>
I realize this is difficult to diagnose without having a codepen to troubleshoot on, but any help/suggestions are appreciated.
I use Handlebars for a simple Node.js project and I would like to insert more than just few variables in a partial.
I have a layout that contains the very basic frame of my html page (html and head tags). The pages I render are usually all the same and contain the following code:
{{> default/header
help_title="This is the title of my help modal."
help_body="<p>This is the body.</p>"
}}
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
<!-- THE CONTENT THERE -->
</div>
</div>
</div>
</main>
{{> default/footer}}
Depending on the page itself, I may want not to display the header and/or the footer (and I remove the line consequently).
My need: I'd like to wrap the main part in a partial (because everything but the <!-- THE CONTENT THERE --> is invariant) or whatever could do the job and providing to it not only few words (like in the header) but potentially a lot of html code. And I cannot find a way to do it in the documentation. Something like this, that would basically work a bit like layouts:
{{> default/main
<!-- THE RAW HTML CONTENT THERE -->
}}
Handlebars supports exactly what you are describing in the form of partial blocks. The default behavior of partial blocks is to render default content if the partial cannot be found. However, there is a special built-in helper, #partial-block which will inject content into your partial.
From the documentation:
This block syntax may also be used to pass templates to the partial, which can be executed by the specially named partial, #partial-block.
Inside your partial, you will add {{> #partial-block }} where you want the content to be injected. In your case, your "main" partial would look like:
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
{{> #partial-block }}
</div>
</div>
</div>
</main>
Then, the page that is calling the "main" partial would do using the block syntax with the content that is to be injected into the partial put inside of block tags:
{{#> main}}
<p>THE RAW HTML CONTENT HERE</p>
{{/main}}
I have created a fiddle for your reference.
Given some very basic html using flexbox, I can achive a screen with a header, footer and a content area that fills all the space in between:
<html>
<body style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;flex-direction:row">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row">Footer</div>
</body>
</html>
Header displays at top, footer at the very bottom.
+++++++++++++++++++++
+ Header
+ Content Area
+
+
+
+
+ Footer
+++++++++++++++++++++++++
However, if I try to achieve the same thing within Aurelia (using the webpack starter kit) the grow seems to be ignored on both the body and the content elements.
index.ejs -- comes with starter kit I added styling to original file
<body aurelia-app="main" style="display:flex;flex-direction:column;flex-grow:1">
app.html -- changes to original starter kit file
<template>
<div style="display:flex;flex-direction:row;">Header</div>
<div style="display:flex;flex-direction:row;flex-grow:1">Content Area</div>
<div style="display:flex;flex-direction:row;">Footer</div>
</template>
I also tried adding flex to <template style="display:flex;flex-direction:column;flex-grow:1">
Everything looks good when you inspect the page -- in fact, looks almost exactly like the basic html example. However, the body and the div containing the Content Area do not grow to fill the height of the page.
I tried to get an example working in Plnkr but it actually has the same problem as Aurelia. I noticed that it is using shadow element just like Aurelia does -- I'm guessing that may have something to do with it?
For it to work with Aurelia (or alone), you should layout the markup like this
<body aurelia-app="main" style="height:100vh;margin:0;display:flex;flex-direction:column;">
<my-template style="display:flex;flex-direction:column;flex-grow:1">
<div style="display:flex;">Header</div>
<div style="display:flex;flex-grow:1">Content Area</div>
<div style="display:flex;">Footer</div>
</my-template>
</body>
where the <template>, if it gets rendered, needs to be <my-template> for it to work, as the <template> tag has a special meaning and won't render visually, see MDN; https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template.
Then the body (or any main element) needs a height, and here I used height:100vh.
Also do note, the flex-grow you had on the <body> won't apply if not its parent, the <html> also has display: flex
Scenario
Suppose I have a web service capable of fetching a webpage and its static assets (e.g. using PhantomJS). I want to be able to serve the static DOM sub-structure (e.g. everything under the #content div) along with its styling to a new site that shows the extracted webpage on the left side along with the amazing results of my super-amazing awesome machine-learning algorithm for extracting information from webpages on the other side.
Question
Supposing I can send down the HTML sub-structure, CSS, and other asset files down from the server, how do I go about injecting the HTML substructure into a div on my page while scoping the styling?
<!-- partially modified content pulled from another site -->
<div id="content">
<!-- I might pull stylesheets from head of source site -->
<!-- and inject them in content? Or should I just keep -->
<!-- track of styles separately and manually inject them? -->
<link rel="stylesheet" type="text/css" href="theme.css">
<img src="new/path/to/static/resource/that/i/saved"/>
</div>
<!-- my own web page with stuff etc -->
<div id="left">
<!-- INSERT CONTENT DIV AND OTHER ASSETS HERE -->
</div>
<div id="right">
<!-- here I have Vue components and other page interaction stuff -->
</div>
Currently I'm using VueJS for my webpage. I know I can do style scoping using Vue components -- maybe there is a way to leverage that? But I really want to know how to solve this problem in a general, framework-agnostic way. I'm too paralyzed by all these things I think could go wrong to even start...
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.