bearandpear

Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)
  • Forum: Plugins
    In reply to: [Melonpan Block - Container] Wrap .mbc-container div in other elements
    Thread Starter bearandpear

    (@bearandpear)

    7 years ago

    Hi Álvaro,

    I have now found a way of achieving what I wanted. Thank you for all of your help with my slightly off-topic problems and for building your amazing plugin! (Was that you also on StackExchange? Very helpful!)

    I actually found it too hard to hook into the plugin and add my own content (due to my own inexperience), but I have found a work-around by creating a simple container block plugin including the HTML I need. This uses innerBlocks, so I can then insert a melonpan container block in this with all of the custom filters I set up. Works a treat!

    For anyone else looking for some help with something similar I started the following question which has had some very useful info from cleverer folk than I…
    https://wordpress.stackexchange.com/questions/338108/wrap-gutenberg-block-div-in-other-elements-extra-html

    Thank you,
    bearandpear

    Forum: Fixing WordPress
    In reply to: Wrap block ‘div’ in other elements
    Thread Starter bearandpear

    (@bearandpear)

    7 years ago

    Thank you so much for sending this over @serafinnyc, very interesting and comprehensive guide to clipping and masking.

    I have done a fair bit of experimenting with CSS clip-path and SVG clipPath and unfortunately they will not work for what I am trying to achieve. CSS clip-path would be PERFECT, but I need cross-browser support.

    The sightly ‘hacky’ way of using CSS transforms I have suggested above seems to work on all modern browsers, but I just don’t know how to add the extra HTML to a gutenberg block.

    Forum: Fixing WordPress
    In reply to: Wrap block ‘div’ in other elements
    Thread Starter bearandpear

    (@bearandpear)

    7 years ago

    So I want to be able to add this before the ‘block’:

    <div class="transform-containter">
<div class="transform-right">
<div class="transform-left">
<div class="transform-content">

    And this after:

    </div>
</div>
</div>
</div>
    Forum: Fixing WordPress
    In reply to: Wrap block ‘div’ in other elements
    Thread Starter bearandpear

    (@bearandpear)

    7 years ago

    No, as I need cross-browser support. SVG also does not work for what I am trying to achieve.

    I am essentially using four divs (maybe a little overkill)—two with rotate css transforms and two containers—to create a trapezoid in which background images/videos will be clipped.

    HTML:

    <div class="transform-containter">
<div class="transform-right">
<div class="transform-left">
<div class="transform-content">
<div class="block-container">
BLOCK CONTENT HERE
</div>
</div>
</div>
</div>
</div>

    CSS:

    .transform-containter {
	width: 100%;
	height: auto;
	margin-top: 0;
	overflow-x: hidden;
	overflow-y: hidden;
}
.transform-right {
	position: relative;
	width: 110%;
	height: 100%;
	top: 0;
	left: -5%;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
	overflow: hidden;
	margin-top:2.5%;
}
.transform-left {
	position: relative;
	width: 110%;
	height: 100%;
	left: -5%;
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	transform: rotate(-4deg);
	overflow: hidden;
	margin-top: -4%;
	margin-bottom: 3.5%;
}
.transform-content {
	width: 100%;
	height: 100%;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	-o-transform: rotate(2deg);
	transform: rotate(2deg);
	background-color: #cccccc;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2% 0 -2% 0;
	padding: 2em 10%;
}
    Forum: Plugins
    In reply to: [Melonpan Block - Container] Wrap .mbc-container div in other elements
    Thread Starter bearandpear

    (@bearandpear)

    7 years ago

    Hi @melonpan,

    I’ve created my own plugin which uses the MBC plugin filters as per your FAQ—works perfectly and is amazing, thank you.

    I have not however been able to figure out how to implement the above code you wrote nor how to build something myself. Where would you suggest I add the above code?

    Sorry I’m a complete novice with Javascript/React and I know this goes far beyond the scope of the plugin, but your help would be greatly appreciated if you have the time. If not don’t worry, I will close the topic as solved.

    Thank you,

    bearandpear

    Forum: Plugins
    In reply to: [Melonpan Block - Container] Wrap .mbc-container div in other elements
    Thread Starter bearandpear

    (@bearandpear)

    7 years ago

    Hi @melonpan,

    Thank you for this! Your plugin is great, I have been trying lots of different ones for providing a container block and this is by far the best I have come across! I am a primarily a designer and only have HTML, CSS, and a little PHP knowledge, hence the need for me editing an existing plugin.

    The CSS pseudo elements work great with block colour backgrounds, thank you for suggesting this, but I am trying to create something which can also have background images/videos, so I am essentially trying to ‘clip’ the content div (without using clip-path or SVG due to browser support/limitations).

    I will see if I can work out how to use the above. I’ll keep you posted…

    Thanks again,

    bearandpear

Viewing 6 replies - 1 through 6 (of 6 total)