I have a custom block that creates a 3 column template with InnerBlocks and a templateLock="all" attribute to avoid that users move/remove or add something in the template. It used to properly work on WordPress 6.0.3 (and bellow) but then when I updated to 6.1.1 it had issues. Instead of locking the template and showing the columns in which I should be able to add other blocks, it hides the newly inserted columns so that they are unselectable in the editor.
Here is how I create the innerBlocks
<window.wp.blockEditor.InnerBlocks
template={new Array(3).fill(['core/column', {}])}
templateLock="all"
/>
Here is what I have when I copy the block
<!-- wp:attest/grid-columns {"numColumnsStr":"3"} -->
<div class="grid grid--columns-3"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:attest/grid-columns -->
I've tried to look at the changes since WordPress 6.0.3 but couldn't find something useful.
Thanks for you help.
In fact child blocks inherits from parent's templateLock attribute so the columns were present, they were just locked and as they are newly inserted, they were empty thus rendered invisible. So the idea is to unlock the core/column block and its (future) child blocks by default. Here is my updated code
<window.wp.editor.InnerBlocks
template={new Array(numColumns).fill(['core/column', {templateLock: false, lock: {move: false, remove: false}}])}
templateLock='all'
/>
Related
I am working on a wordpress website with the wordpress personal plan (no option to use plugins and no option to edit the CSS code). I assumed creating a sticky header in wordpress would be a matter of turning on a switch in the header menu, but it seems more difficult than I thought. I now got into the Code editor menu of the header in which I think it may be possible to make the header stick, but any other recommendations are more than welcome.
I have tried going through the entire header settings and options menu to see if I could find a way to make the header stick, but without success. I've also tried Googling solutions but everything I could find included either using plugins or editing the CSS code which I am both unable to do given the plan I'm using. Now I found the Code editor of the header and footer, in which I think it might be possible to make the header stick, but I haven't been able to figure it out yet. The current Code editor code is:
<!-- wp:group {"className":"gapless-group","layout":{"inherit":"true","type":"constrained"}} -->
<div class="wp-block-group gapless-group"><!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dgap\u002d\u002dvertical)","top":"var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dgap\u002d\u002dvertical)"}}},"className":"site-header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignfull site-header" style="padding-top:var(--wp--custom--gap--vertical);padding-bottom:var(--wp--custom--gap--vertical)"><!-- wp:group {"className":"site-brand","layout":{"type":"flex"}} -->
<div class="wp-block-group site-brand"><!-- wp:site-logo {"width":64} /-->
<!-- wp:group -->
<div class="wp-block-group"><!-- wp:site-title {"style":{"typography":{"letterSpacing":"3px","textTransform":"capitalize","lineHeight":"1.2"}},"fontSize":"x-large"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:navigation {"ref":749,"className":"social-links","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|50"},"typography":{"fontSize":"1.3rem"}}} /-->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#00a54f"},"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}},"border":{"radius":"5px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="https://kungfuhaarlem.com/contact/" style="border-radius:5px;background-color:#00a54f;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)">Gratis proefles!</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
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?
Is there a way to set the height of a div using only CSS so it will fill out the reminder of the page height?
I have very limited control over the webpage (a client's custom framework), and it's not possible to change any html or use javascript.
Basically I have a textbox where I can write CSS, and that's it.
Also, I can't make fundamental changes(like introducing flex or anything like that) since it would break the page/site.
The site don't use any media queries or define viewports or anything like that. Basically they use HTML 3.2. It's an ASP.NET WebForms site where the core parts were built around 2002 - 2005.
...
<body>
...
<div id="rowContainer"> <!-- This is the div that needs to go all the way down to the very end
of the entire page.
(NOTE: NOT the end of the visible part of the page) -->
<!-- child elements consist of hierarchy of divs
(but are row based, the content of a "row" is undefined),
which use a mixture of relative, absolute and fixed positioning.
They are dynamically generated and they are "undefined",
so no assumptions can be made about the child nodes -->
<div css="row" > ... </div> <!-- These child divs might all be
absolutely positioned -->
<div css="row" > ... </div>
<div css="row" > <!-- row content is undefined and can change at any time --> </div>
<div css="row" > ... </div>
</div> <!-- There are no other visible elements after the "rowContainer" -->
</body>
use
#rowContainer{
height:100vh;
}
I have a simple question: I am currently creating my portfolio in html
I wish that by clicking on the image, I can write the description of my choice. For the moment it shows me this:
I give you the party of the corresponding code below.
Thank you again for your help !
<!-- item -->
<div class="project-item">
<!-- ==> Put your thumbnail as a background -->
<a href="img/portfolio/p2.jpg" class="project-thumbnail nivobox" data-lightbox-gallery="portfolio" style="background-image: url('img/portfolio/thumb-p2.jpg');">
<!-- project-description -->
<div class="project-description-wrapper">
<div class="project-description">
<!-- project name -->
<h2 class="project-title">Project Title</h2>
<!-- /project name -->
<span class="see-more">Project Tags</span>
</div>
</div>
<!-- /project-description -->
</a>
</div>
<!-- /item -->
I don't know what framework (if at all) you're using, but my go-to solution for creating websites, is MaterializeCSS.
And oh look, they got something that exactly matches what you want (as far as I can understand, let me know if it doesn't).
Here it is:
<!-- MATERIAL BOXED-->
<h1>MATERIAL BOXED</h1>
<img src="http://materializecss.com/images/sample-1.jpg" alt="" class="materialboxed" data-caption="Here is an image caption">
The only change that you must do in your code, is to import the Materialize library and jQuery necessary, all of which are in their official page.
Hope this can help you solve your problem, it might look a bit un-orthodox but it gets the job done, at looks pretty nice doing so ;)
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...