Code Block
Php
<?php
add_action(
'init',
function() {
$block_styles = get_register_block_styles();
if ( $block_styles ) {
foreach ( $block_styles as $block ) {
// $rows = json_decode( $style_string, true );
if ( $block['block_name'] && $block['styles'] ) {
foreach ( $block['styles'] as $style_properties ) {
register_block_style( $block['block_name'], $style_properties );
}
}
}
}
}
);
Php with copy
<?php
namespace BRS\Headless;
add_action(
'init',
function() {
$block_styles = get_register_block_styles();
if ( $block_styles ) {
foreach ( $block_styles as $block ) {
// $rows = json_decode( $style_string, true );
if ( $block['block_name'] && $block['styles'] ) {
foreach ( $block['styles'] as $style_properties ) {
register_block_style( $block['block_name'], $style_properties );
}
}
}
}
}
);
Bash (Default)
# Comment
npm run push-editor-styles
Bash with copy
# Comment
npm run push-editor-styles
tsx
import React from 'react';
import clsx from 'clsx';
type Props = {
isOpen: boolean;
toggleMenu: () => void;
};
/**
* Hamburger
*/
const Hamburger = ({ isOpen, toggleMenu }: Props) => {
return (
<>
<div className="menu-button relative py-6 pr-2 md:px-7 ml-8 md:ml-0">
<div className="bg hidden md:block absolute top-0 left-0 w-full h-full rounded-full bg-white" />
<div className="flex items-center relative">
<div className="relative h-full flex flex-col items-center text-lg font-serif font-semibold leading-none overflow-hidden md:text-black text-black">
<span>
<div className="w-16 top-0 left-0">Menu</div>
</span>
</div>
<nav className="-ml-3">
<button
className="text-gray-500 w-10 h-10 relative focus:outline-none bg-white"
onClick={() => toggleMenu()}
>
<span className="sr-only">Open main menu</span>
<div className="block w-5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span
aria-hidden="true"
className={clsx(
'block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ',
isOpen && 'rotate-45',
!isOpen && '-translate-y-1.5'
)}
></span>
<span
aria-hidden="true"
className={clsx(
' block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out',
isOpen && 'opacity-0'
)}
></span>
<span
aria-hidden="true"
className={clsx(
'block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out ',
isOpen && '-rotate-45',
!isOpen && 'translate-y-1.5'
)}
></span>
</div>
</button>
</nav>
</div>
</div>
</>
);
};
export default Hamburger;
json
[
{
color: "red",
value: "#f00"
},
{
color: "green",
value: "#0f0"
},
{
color: "blue",
value: "#00f"
},
{
color: "cyan",
value: "#0ff"
},
{
color: "magenta",
value: "#f0f"
},
{
color: "yellow",
value: "#ff0"
},
{
color: "black",
value: "#000"
}
]
css
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';
/*
* components/gutenberg/button - start
*/
.wp-block-button {
@apply inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
}
.wp-block-button.is-style-primary {
@apply text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500;
}
.wp-block-button.is-style-secondary {
@apply text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
}
.wp-block-button__link {
color: inherit !important;
background-color: inherit;
border-radius: inherit;
box-shadow: none;
cursor: pointer;
display: inherit;
font-size: inherit;
padding: 0px;
text-align: center;
text-decoration: none;
word-break: break-word;
box-sizing: border-box;
}
.editor-styles-wrapper .wp-block-button__link {
background-color: inherit !important;
}
HTML
<!-- https://tailwindcomponents.com/component/component-hover-effect -->
<div class="flex h-screen w-full items-center justify-center overflow-hidden bg-green-100">
<div class="group relative border-dashed border-red-500 hover:border">
<!-- replace the button with other elements as per your wish -->
<button class="relative h-[40px] w-[150px] rounded bg-green-300 hover:border">Get Started</button>
<span class="hidden md:group-hover:inline">
<span class="absolute right-full bottom-full w-10 border-t border-dashed border-red-500"></span>
<span class="absolute right-full top-full w-10 border-b border-dashed border-red-500"></span>
<span class="absolute left-full bottom-full w-10 border-t border-dashed border-red-500"></span>
<span class="absolute left-full top-full w-10 border-b border-dashed border-red-500"></span>
<span class="absolute top-full left-full h-10 border-l border-dashed border-red-500"></span>
<span class="absolute top-full right-full h-10 border-l border-dashed border-red-500"></span>
<span class="absolute bottom-full right-full h-10 border-r border-dashed border-red-500"></span>
<span class="absolute bottom-full left-full h-10 border-l border-dashed border-red-500"></span>
<!-- here I set the background color to match the background color of the div -->
<span class="absolute bottom-[calc(100%-2px)] right-[calc(100%-2px)] h-[5px] w-[5px] rounded-2xl border border-red-500 bg-green-100"></span>
<span class="absolute top-[calc(100%-2px)] right-[calc(100%-2px)] h-[5px] w-[5px] rounded-2xl border border-red-500 bg-green-100"></span>
<span class="absolute bottom-[calc(100%-2px)] left-[calc(100%-2px)] h-[5px] w-[5px] rounded-2xl border border-red-500 bg-green-100"></span>
<span class="absolute top-[calc(100%-2px)] left-[calc(100%-2px)] h-[5px] w-[5px] rounded-2xl border border-red-500 bg-green-100"></span>
</span>
</div>
</div>
js
require('dotenv-flow').config();
/**
* GenesisConfig
*/
const config = {
endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`,
typescript: {
generate: true,
destination: './src/client/genesis.generated.ts',
},
scaffold: {
generate: true,
destination: './src/components/GenesisCustomBlocks/',
overwrite: true,
},
parseGenesisCustomBlocks: {
generate: true,
destination: './src/components/Html2React/parseGenesisCustomBlocks.tsx',
},
};
module.exports = config;
Leave a Reply