Ich war einen Beitrag über Booking.com am schreiben und mir ist aufgefallen, dass dieser Beitrag sehr trocken wird, wenn ich diesen einfach runter schreibe. Um es etwas schöner zu gestalten, habe ich einen Block programmiert, womit ich meine Schreiben an Booking.com darstellen kann.
Der Block
Es handelt sich um einen Block Container, wo Texte eingegeben werden können. Den eigentlichen Teil dieses Blocks macht das pure CSS-Hintergrund aus. Es sieht folgendermaßen aus:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Falls ihr diesen Block ebenfalls in eurem Projekt benutzen möchtet, braucht ihr nur die Zip-Datei unten herunterzuladen und in eurem Code die php-Datei laden, das in der Zip-Datei enthalten ist. Anschließend braucht ihr eigentlich nur die css-Datei anpassen.
Der Code
import './stationery.scss';
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;
const {
InspectorControls,
InnerBlocks,
MediaUpload
} = wp.editor;
registerBlockType( 'powerradach/stationery', {
title: 'Briefpapier',
icon: 'format-aside',
category: 'layout',
keywords: ['stationery'],
attributes: {
content: {
type: 'array',
source: 'children',
},
},
edit: function(props) {
return <div className={'stationery'} ><InnerBlocks /></div>
},
save: function(props) {
return <div className={'stationery'}><InnerBlocks.Content /></div>
},
} );:root{
--stationery-line-height: 30px;
--stationery-padding-horizontal: 55px;
}
#editor .stationery,
.stationery{
width: calc( var(--text-width) + var(--stationery-padding-horizontal) + var(--stationery-padding-horizontal) );
max-width: 100%;
margin: 0 auto;
padding: calc(var(--stationery-line-height) - 2px) var(--stationery-padding-horizontal) 27px;
position: relative;
border: 1px solid #B5B5B5;
background: white;
background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
-webkit-background-size: 100% var(--stationery-line-height);
-moz-background-size: 100% var(--stationery-line-height);
-ms-background-size: 100% var(--stationery-line-height);
background-size: 100% var(--stationery-line-height);
&:before {
content: "";
z-index: -1;
margin: 0 1px;
width: calc(100% - 2px);
height: 10px;
position: absolute;
bottom: -3px;
left: 0;
background: white;
border: 1px solid #B5B5B5;
}
&:after {
content: '';
position: absolute;
width: 0px;
top: 0;
left: 39px;
bottom: 0;
border-left: 1px solid #F8D3D3;
}
.outer-wrapper{
padding: 0!important;
margin-bottom: var(--stationery-line-height);
.inner-wrapper{
padding: 0!important;
p{
line-height: 30px!important;
}
}
}
}<?php
defined( 'ABSPATH' ) || exit;
foreach (array('enqueue_block_editor_assets', 'enqueue_block_assets') as $action_tag) {
add_action( $action_tag, function(){
wp_enqueue_script(
basename(__DIR__),
get_template_directory_uri() . substr( __DIR__, strlen( get_template_directory() ) ) .'/block.js',
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' )
);
wp_enqueue_style(
basename(__DIR__).'-style',
get_template_directory_uri().'/blocks/'.basename(__DIR__).'/'.basename(__DIR__).'.css'
);
register_block_type( 'powerradach/'.basename(__DIR__), array(
'editor_script' => basename(__DIR__),
'style' => basename(__DIR__).'-style',
'editor_style' => basename(__DIR__).'-style'
) );
});
}Fazit
Ich hoffe, dass ich euch mit dem Block etwas helfen konnte und würde euch bitte, bei einem Fehler euch bei mir zu melden, damit wir das Problem gemeinsam lösen können.
