Parę styli bo editor-style.css, które modyfikują wygląd edytora wizualnego w WordPress’ie dla wygody działania, w szczególności z sekcjami i grupami.
{ Twoj projekt }\wp-content\themes\twentyseventeen\assets\css\editor-style.css
- Rozszerza panel edytora (nie wiedzieć dlaczego taki wąski)
- Uwidocznia Grupy „div” i „section”
- Elementów Header i Footer
- Oznacza nagłównik h1, h2, h3, h4
- Oznaczenie paragrafów
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@700&display=swap'); /*--- to wrzucić na początku css ---*/
/* #############################################################################################################################################
############################################### MOJE STYLE EDYTORSKIE SAJAN ###############################################
############################################################################################################################################# */
/*--------------------------------------------------------------- ELEMENT HEADER --------------------------------------------------*/
/* Oznaczenie grup <header> */
.block-editor-block-list__layout header::before{
content: 'HEADER'!important;
background: #0aed00!important;
color: #fff!important;
position: absolute!important;
top: 0px!important;
left: 0px!important;
border-radius: 0 0 9px 0px!important;
font-size: 11px!important;
font-family: 'Ubuntu Mono', sans-serif!important;
letter-spacing: 0.5px!important;
padding: 0px 4px 0px 3px!important;
width: unset!important;
height: unset!important;
}
.block-editor-block-list__layout header {
border: dashed 3px #0aed00;
padding: 24px 8px 8px 8px!important;
}
/*--------------------------------------------------------------- ELEMENT FOOTER --------------------------------------------------*/
/* Oznaczenie grup <footer> */
.block-editor-block-list__layout footer::before {
content: 'FOOTER'!important;
background-color: #0aed00!important;
color: #fff!important;
position: absolute!important;
top: 0px!important;
left: 0px!important;
border-radius: 0 0 9px 0px!important;
font-size: 11px!important;
font-family: 'Ubuntu Mono', sans-serif!important;
letter-spacing: 0.5px!important;
padding: 0px 4px 0px 3px!important;
width: unset!important;
height: unset!important;
}
.block-editor-block-list__layout footer {
border: dashed 3px #0aed00;
padding: 24px 8px 8px 8px!important;
}
/*--------------------------------------------------------------- GRUPY SECTION --------------------------------------------------*/
.block-editor-block-list__layout section.wp-block-group {
border: dotted 5px #00900f;
padding: 24px 8px 8px 8px!important;
margin-top: 10px;
margin-bottom: 10px;
}
.block-editor-block-list__layout section.wp-block-group::before {
content: 'sekcja';
font-size: 12px;
font-weight: bold;
background-color: #00900f;
padding: 5px;
color: #fff;
position: relative;
top: -17px;
left: -15px;
border-radius: 0 0 12px 0px;
}
/*--------------------------------------------------------------- GRUPY DIV --------------------------------------------------*/
.block-editor-block-list__layout div.wp-block-group {
border: dashed 3px #f58787;
padding: 24px 8px 8px 8px!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
}
.block-editor-block-list__layout div.wp-block-group::before {
content: 'DIV'!important;
background-color: #f58787!important;
color: #fff!important;
position: absolute!important;
top: 0px!important;
left: 0px!important;
border-radius: 0 0 9px 0px!important;
font-size: 11px!important;
font-family: 'Ubuntu Mono', sans-serif!important;
letter-spacing: 0.5px!important;
padding: 0px 4px 0px 3px!important;
width: unset!important;
height: unset!important;
}
/*--------------------------------------------------------------- PARAGRAFY --------------------------------------------------*/
.block-editor-block-list__layout p {
border: dashed 1px;
padding: 24px 8px 8px 8px!important;
}
.block-editor-block-list__layout p::before {
content: 'P'!important;
background-color: #000!important;
color: #fff!important;
position: absolute!important;
top: 0px!important;
left: 0px!important;
border-radius: 0 0 9px 0px!important;
font-size: 11px!important;
font-family: 'Ubuntu Mono', sans-serif!important;
letter-spacing: 0.5px!important;
padding: 0px 4px 0px 3px!important;
width: unset!important;
height: unset!important;
}
/* Rozszerzenie panelu edytora */
.block-editor-block-list__layout .wp-block {max-width: unset;}
/* Oznaczenie nagłówków */
.block-editor-block-list__layout h1:before{content: 'H1';}
.block-editor-block-list__layout h2:before{content: 'H2';}
.block-editor-block-list__layout h3:before{content: 'H3';}
.block-editor-block-list__layout h4:before{content: 'H4';}
.block-editor-block-list__layout h1:before, h2:before, h3before, h4:before {
font-weight: bold;
font-family: monospace;
font-size: 10px;
background-color: #255093;
padding: 4px;
color: #fff;
border-radius: 18px;
position: relative;
top: -18px;
}