Este es uno de los ejemplos que mostré durante la presentación que hice en la WordCamp Logroño 2025.
El resultado final
El código
add_action( 'init', 'cg_faq_bottle_icon_style' );
function cg_faq_bottle_icon_style() {
register_block_style( 'core/details', array(
'name' => 'faq-bottle-icon',
'label' => __( 'FAQ Bottle Icon', 'Osom-block-styles' ),
'inline_style' => '
details.wp-block-details.is-style-faq-bottle-icon {
background: var(--wp--preset--color--secondary-background);
}
.wp-block-details.is-style-faq-bottle-icon summary {
font-weight: bold;
list-style: none;
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
padding: 1rem;
border: 1px solid #a80048;
transition: all 0.5s ease;
background: var(--wp--preset--color--secondary-background);
}
.wp-block-details.is-style-faq-bottle-icon summary::-webkit-details-marker {
display: none;
}
.wp-block-details.is-style-faq-bottle-icon summary::before {
content: "";
min-width: 40px;
height: 40px;
mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 379.971 379.971%22%3E%3Cg%3E%3Cpath d=%22M243.459,116.271c-6.568-6.013-13.361-12.231-19.037-23.336c-4.045-7.92-5.931-50.571-5.931-76.903C218.491,7.192,211.93,0,203.864,0h-27.752c-8.066,0-14.629,7.192-14.629,16.032c0,26.332-1.885,68.984-5.93,76.902c-5.675,11.106-12.468,17.324-19.038,23.337c-10.408,9.527-20.24,18.526-20.24,42.559v168.736c0,23.428,4.426,36.667,14.8,44.267c10.271,7.525,25.611,8.138,43.133,8.138c3.029,0,6.197-0.022,9.508-0.046c2.043-0.014,4.141-0.028,6.243-0.039c2.153,0.011,4.251,0.025,6.294,0.039c3.312,0.023,6.481,0.046,9.51,0.046c0,0,0,0,0.002,0c17.522,0,32.865-0.613,43.133-8.137c10.372-7.6,14.797-20.838,14.797-44.268V158.83C263.698,134.798,253.867,125.799,243.459,116.271z M172.483,16.032c0-2.728,1.662-5.032,3.629-5.032h27.752c1.966,0,3.627,2.305,3.627,5.032c0,0.902,0.009,7.424,0.263,17.636c0,0-0.017,1-1.256,1c-8.392,0-24.745,0-33.136,0c-1.125,0-1.142-1-1.142-1C172.474,23.456,172.483,16.934,172.483,16.032z M252.698,327.566c0,19.26-3.176,30.176-10.299,35.395c-6.896,5.053-18.194,6.01-36.634,6.01c-3.004,0-6.147-0.022-9.434-0.046c-2.051-0.014-4.158-0.028-6.371-0.039c-2.163,0.011-4.269,0.025-6.32,0.039c-3.285,0.023-6.427,0.046-9.432,0.046c-34.874,0-46.934-2.006-46.934-41.404V158.83c0-19.188,6.991-25.588,16.667-34.445c6.95-6.361,14.828-13.572,21.406-26.447c2.96-5.794,4.691-18.661,5.705-34.169c0,0,0.308-2,1.6-2c8.667,0,26,0,34.667,0c1.541,0,1.6,2,1.6,2c1.014,15.509,2.746,28.375,5.707,34.17c6.577,12.874,14.454,20.084,21.404,26.446c9.676,8.857,16.667,15.256,16.667,34.445V327.566L252.698,327.566z%22/%3E%3Cpath d=%22M212.303,119.155c-1.217-2.428-1.217-2.041-22.815-2.041c-20.472,0-20.472-0.334-21.817,2.041c-12.539,22.147-29.223,20.697-29.223,47.899v153.642c0,37.429,15.538,35.544,51.538,35.377c36.006,0.167,51.543,2.052,51.543-35.377V167.054C241.528,139.853,223.725,141.9,212.303,119.155z M229.604,246.971c0,5.125-4.193,9.318-9.318,9.318h-60.597c-5.125,0-9.318-4.193-9.318-9.318v-35.502c0-5.125,4.193-9.317,9.318-9.317h60.597c5.125,0,9.318,4.192,9.318,9.317V246.971z%22/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transform: rotate(0deg);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background-color: #a80048;
}
.wp-block-details.is-style-faq-bottle-icon[open] summary::before {
transform: rotate(90deg);
background-color: var(--wp--preset--color--primary);
}
.wp-block-details.is-style-faq-bottle-icon > *:not(summary) {
padding: 0 1.5rem 1rem;
margin-block-start: 0;
opacity: 0;
transform: translateY(-10px);
transition: all 0.5s ease;
}
.wp-block-details.is-style-faq-bottle-icon[open] > *:not(summary) {
opacity: 1;
transform: translateY(0);
}
details.wp-block-details.is-style-faq-bottle-icon[open] {
position: relative;
color: #fff;
transition: color 0.3s ease;
background: transparent;
}
details.wp-block-details.is-style-faq-bottle-icon[open]::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
background-color: #a80048;
animation: slide-up 1s ease forwards;
z-index: -1;
}
@keyframes slide-up {
from {
height: 0;
}
to {
height: 100%;
}
}
',
) );
}
