Crear bloques que se muestren solo a suscriptores activos de Restrict Content Pro

Aprende en este tutorial a restringir la visualización de ciertos bloques solo para suscriptores activos de Restrict Content Pro en un tema de bloques.

Si utilizas Restrict Content Pro como sistema para restringir contenido en WordPress, te habrás acostumbrado a añadir los shortcodes [restrict]] y [[/restrict] antes y después del material que quieres ocultar a los no suscriptores.

Pero, ¿a qué sería mucho más práctico e intuitivo poder utilizar un bloque nativo de WordPress y poder indicarle que solo se muestre a los suscriptores?

Ejemplos de bloques donde sería muy práctico tener esta opción son:

• Audio
• Imagen
• Fichero
• Código

Vamos a ver cómo podemos conseguirlo combinando varios elementos que hemos utilizado en tutoriales anteriores:

• Crear una variación de bloque
• El filtro pre_render_block
• La función rcp_user_has_active_membership

Vamos a ello:

Instrucciones para ocultar el contenido de un bloque a los usuarios que no tienen una suscripción de RCP activa

1. Registra una nueva variación de bloque

Lo primero que tienes que hacer es registrar las nuevas variaciones.

Para ello crea un fichero llamado block-variations.js dentro de la carpeta /assets/js/ de tu tema (si no existe puedes crearla) con alguno de los siguientes códigos:

En los 4 snippets anteriores la variación contiene los siguientes campos:

• Nombre del bloque: core/audio, core/image, core/file y core/code respectivamente.
• name: nombre interno de la variación de bloque.
• title: título de la variación de bloque.
• label: etiqueta de la variación de bloque que se muestra en el editor.
• icon: icono de la variación de bloque. En este caso un candado (lock).

En los atributos indicas, dependiendo del ejemplo:

• className: permite añadir una clase de CSS específica. En este caso, añade la clase restricted que será que usaremos posteriormente para controlar la visualización del contenido del bloque.

2. Encola las nuevas variaciones de bloques

Una vez que tienes el fichero donde has registrado los estilos, debes encolarlos al tema. Para ello añade el siguiente snippet al final de functions.php:

// Encolar las variaciones de bloque
add_action( 'enqueue_block_editor_assets', 'cg_add_block_variations' );
function cg_add_block_variations() {
	wp_enqueue_script( 'cg-block-variations', get_stylesheet_directory_uri() . '/assets/js/block-variations.js', [ 'wp-blocks' ] );
}

3. Limita la visualización del contenido de los bloques

Una vez que ya has creado las variaciones de bloques que añaden una clase CSS, puedes limitar la visualización de su contenido.

Añade el siguiente fragmento a tu plugin de funcionalidades:

En este código usas la función de rcp_user_has_active_membership para comprobar si el usuario tiene una suscripción activa además de asegurarte de que el bloque tiene la clase de CSS restricted. Todo esto dentro del filtro pre_render_block que te permite mostrar un mensaje en caso de que se cumplan las condiciones.

Es decir, a los usuarios que no tengan una suscripción de Restrict Content Pro activa, en lugar de ver el contenido del bloque, verán un mensaje que les indica que no pueden ver el contenido y que para poder hacerlo tienen que identificarse o suscribirse.

Puedes modificar tanto el texto que se muestra como la URL donde realizar el registro (cambiando /registro/ por el slug donde esté tu página de registro).

En el ejemplo, al hacer clic sobre «identificarse» muestra una ventana modal para agilizar que el usuario se identifique usando el plugin Osom Modal Login (tiene que estar activo). Pero puedes modificar esa parte por un enlace a la página de acceso o lo que consideres más adecuado.

4. Personaliza el CSS del mensaje que se muestra al usuario

Una vez que has ocultado el contenido de los bloques a los no suscriptores, solo te falta darle un poco de estilo al mensaje que aparece en lugar del contenido.

Para ello, añade este bloque al final de style.css:

Esto es solo un ejemplo, pero te invito a que lo personalices acorde al diseño del tema.

Conclusiones

Ahora ya sabes cómo crear bloques que solo muestren el contenido a suscriptores activos de Restrict Content Pro y mostrar al resto un mensaje personalizado invitando a que se registren o identifiquen.

Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.

Todo ventajas de ser suscriptor. 😉