Title: Nicolas Langle's Replies | WordPress.org

---

# Nicolas Langle

  [  ](https://wordpress.org/support/users/nlangle/)

 *   [Profile](https://wordpress.org/support/users/nlangle/)
 *   [Topics Started](https://wordpress.org/support/users/nlangle/topics/)
 *   [Replies Created](https://wordpress.org/support/users/nlangle/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/nlangle/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/nlangle/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/nlangle/engagements/)
 *   [Favorites](https://wordpress.org/support/users/nlangle/favorites/)

 Search replies:

## Forum Replies Created

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/users/nlangle/replies/page/2/?output_format=md)
[→](https://wordpress.org/support/users/nlangle/replies/page/2/?output_format=md)

 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Add color reference to css that alters with a new theme….](https://wordpress.org/support/topic/add-color-reference-to-css-that-alters-with-a-new-theme/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/add-color-reference-to-css-that-alters-with-a-new-theme/#post-18060118)
 * Hebhansen,
 * 1 – You can create a child theme with a theme.json file in it. Both files will
   be merged. Or you can create a style variation by creating a [styles folder at the root of your theme](https://fullsiteediting.com/lessons/global-style-variations/).
   It depends of your needs.
 * 2 – SCSS has been created to give extra fonctionnalites to developers such as
   mixins, variables, functions… Browsers can’t interpretate it. You need what we
   call a transpiler. A transpiler convert a language to an other, it’s a development
   tool, it is not used in production. In our case you need a transpiler which convert
   SCSS to CSS.
 * 3 – As I understand your demand, you want to easily override colors of plugins
   you often use ? But you can’t do that with SCSS. You can override CSS variables
   if your plugins use somes. As I see it, the more easy way to do what you want
   it to recreate a css file and override rules
   **my-file.css**
 *     ```wp-block-code
       :root {    --my-color: #000;}.wp-forms-form .wpforms-field-label {    color: var(--my-color);}#tinymce {    color: var(--my-color);}...
       ```
   
 * Best regards.
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Add color reference to css that alters with a new theme….](https://wordpress.org/support/topic/add-color-reference-to-css-that-alters-with-a-new-theme/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/add-color-reference-to-css-that-alters-with-a-new-theme/#post-18057282)
 * Yes, they exist in default themes. It’s a behavior of the new FSE system via 
   a theme.json file or/and styles variations. You can take a look at the documentation
   [here](https://developer.wordpress.org/themes/global-settings-and-styles/).
 * And more precisely by this [part](https://developer.wordpress.org/themes/global-settings-and-styles/settings/color/)
   which explains how to configure colors.
 * Then you will be able to use or override the WordPress css variables : 
   `--wp--
   preser--color--<your color name>`
    -  This reply was modified 1 year, 7 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Add color reference to css that alters with a new theme….](https://wordpress.org/support/topic/add-color-reference-to-css-that-alters-with-a-new-theme/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 7 months ago](https://wordpress.org/support/topic/add-color-reference-to-css-that-alters-with-a-new-theme/#post-18056851)
 * Hi Hebhansen,
 * You can use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
   Does this meet your needs?
 * Best regards
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Add pagination number on a specific page](https://wordpress.org/support/topic/add-pagination-number-on-a-specific-page/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/add-pagination-number-on-a-specific-page/#post-17958970)
 * Hi Marseem,
 * If your videos are all on the same page you can use the Gutenberg [page break block](https://wordpress.org/documentation/article/page-break-block/).
 * Best regards
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to load block assets in php templates if using hybrid theme](https://wordpress.org/support/topic/how-to-load-block-assets-in-php-templates-if-using-hybrid-theme/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-to-load-block-assets-in-php-templates-if-using-hybrid-theme/#post-17861579)
 * You’re welcome, thank for your feed back !
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to load block assets in php templates if using hybrid theme](https://wordpress.org/support/topic/how-to-load-block-assets-in-php-templates-if-using-hybrid-theme/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-to-load-block-assets-in-php-templates-if-using-hybrid-theme/#post-17859896)
 * Sorry, I should have elaborated a little. I haven’t tried, but I think something
   like this should work :
 *     ```wp-block-code
       <html><head>	<meta charset="<?php bloginfo( 'charset' ); ?>">	<?php	$block_header_part = get_block_template( get_stylesheet() . '//header', 'wp_template_part' );	$block_header = $block_header_part && ! empty( $block_header_part->content ) ? do_blocks( $block_header_part->content  ) : '';	$block_content = do_blocks( '		<!-- wp:group {"layout":{"type":"constrained"}} -->		<div class="wp-block-group">		<!-- wp:post-content /-->		</div>		<!-- /wp:group -->' 	); 	?>	<?php wp_head(); ?></head><body>	<?php	echo $block_header;	echo $block_content;	?></body></html>
       ```
   
 * Can you test that and tell me if it’s work ?
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How to load block assets in php templates if using hybrid theme](https://wordpress.org/support/topic/how-to-load-block-assets-in-php-templates-if-using-hybrid-theme/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-to-load-block-assets-in-php-templates-if-using-hybrid-theme/#post-17859271)
 * Hi [@dahliasan](https://wordpress.org/support/users/dahliasan/),
 * This two functions do the same thing, `block_header_area` call the function `
   block_template_part` which call the function `do_blocks`
 *     ```wp-block-code
       function block_header_area() {	block_template_part( 'header' );}
       ```
   
 *     ```wp-block-code
       function block_template_part( $part ) {	$template_part = get_block_template( get_stylesheet() . '//' . $part, 'wp_template_part' );	if ( ! $template_part || empty( $template_part->content ) ) {		return;	}	echo do_blocks( $template_part->content );}
       ```
   
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Allow editor to use IFRAME code only but disable javascript code?](https://wordpress.org/support/topic/allow-editor-to-use-iframe-code-only-but-disable-using-javascript/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/allow-editor-to-use-iframe-code-only-but-disable-using-javascript/#post-17856434)
 * Hi [@zearth](https://wordpress.org/support/users/zearth/),
 * Can you provide more context please ? If you are talking about embed block, it
   only take a valid url as argument. Are you talking about the script inside the
   iframe generated by embed block ? If it that you will have to add filter on embed
   block to add an attribute [sandbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox)
   to the iframe
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How can I combine multiple CSS files into one when using wp-scripts?](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/#post-17856398)
 * Good to know, thank you for the feed back !
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How can I combine multiple CSS files into one when using wp-scripts?](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/#post-17856237)
 * I have tested something witch seems to work, but you will not be able to compile
   scss, you will have to use plain css or create your own stack :
 *     ```wp-block-code
       build/├─ block1/│  ├─ block.json│  ├─ index.js├─ block2/│  ├─ block.json│  ├─ index.jscommon├─ stlye.csssrc/├─ ...
       ```
   
 * In block.json file :
 *     ```wp-block-code
       {  "$schema": "https://schemas.wp.org/trunk/block.json",  "apiVersion": 2,  "name": "block/name",  "version": "1.0.0",  ...  "style": "file:../../common/style.css"}
       ```
   
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How can I combine multiple CSS files into one when using wp-scripts?](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/#post-17856173)
 * Hum, Gutenberg doesn’t work this way so each block should be able to load its
   own css when needen. It’s how the create-block stack is build so I don’t think
   there is a way to do what you want.
 * If you have shared style between block maybe you can create separate css file
   but you will have to enqueue it manually both in [frontend](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)
   and in [editor](https://developer.wordpress.org/reference/functions/add_editor_style/).
 *     ```wp-block-code
       build/├─ blocks/│  ├─ block1/│  │  ├─ block.json│  │  ├─ index.css│  │  ├─ style-index.css│  ├─ block2/│  │  ├─ block.json│  │  ├─ index.css│  │  ├─ style-index.csssrc/├─...common/├─ style.css├─ editor.cssmy-block-plugin.php
       ```
   
 * In the php file, something like that :
 *     ```wp-block-code
       if ( is_admin() ) {  add_action( 'init', function() {      add_editor_style( $editor_css_path );  } )}if ( ! is_admin() ) {  add_action( 'wp_print_styles', function() {    wp_enqueue_style( 'my-block-plugin', $style_css_src, ... )    } )}
       ```
   
 * But this way, you lose the ability of Gutenberg to load style on frontend only
   when your blocks are present in the page.
 * Sorry I don’t see any other possibilities… Hope this help
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [How can I combine multiple CSS files into one when using wp-scripts?](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/how-can-i-combine-multiple-css-files-into-one-when-using-wp-scripts/#post-17855963)
 * Hi [@hannnes](https://wordpress.org/support/users/hannnes/),
 * You can convert your css file into scss and then import your style (for the frontend)
   inside the edit file (for the backend) :
 *     ```wp-block-code
       // edit.scss@import './style.scss'; 
       ```
   
 * Like that, you have the frontend style in the editor and you can add additional
   rules for the backend
 * Is that you want to do ?
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Page retrieval time from google](https://wordpress.org/support/topic/page-retrieval-time-from-google/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/page-retrieval-time-from-google/#post-17854446)
 * Google crawl the same page as user, improve speed for user also improve speed
   for google crawler
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Page retrieval time from google](https://wordpress.org/support/topic/page-retrieval-time-from-google/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/page-retrieval-time-from-google/#post-17854433)
 * Hi [@eliot1988](https://wordpress.org/support/users/eliot1988/),
 * Your speed is good on desktop but the score is less good on mobile, you can check
   that here :
 * [https://pagespeed.web.dev/analysis/http-metalstories-gr/y1eqzlomrl?hl=fr&form_factor=mobile](https://pagespeed.web.dev/analysis/http-metalstories-gr/y1eqzlomrl?hl=fr&form_factor=mobile)
 * You can try Wp rocket to improve your site performances if you have not already
   installed it :
 * [https://wp-rocket.me/](https://wp-rocket.me/)
 *   Forum: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
   
   In reply to: [Get file size, dimension and file type in image caption](https://wordpress.org/support/topic/get-file-size-dimension-and-file-type-in-image-caption/)
 *  [Nicolas Langle](https://wordpress.org/support/users/nlangle/)
 * (@nlangle)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/get-file-size-dimension-and-file-type-in-image-caption/#post-17851386)
 * If you use Gutenberg editor for displaying your image, something like that should
   work :
 *     ```wp-block-code
       /** * Get file details string * @param int $id * @return string  */function get_file_details_string( $id ) {	$file_path = get_attached_file( $id );	if ( empty( $file_path ) ) {		return '';	}	$file_weight = size_format( wp_filesize( $file_path ) );	$file_size   = wp_getimagesize( $file_path );	return '<strong>File Type:</strong> ' . $file_size['mime'] . ' | <strong>File Size:</strong> ' . $file_weight . ' | <strong>Dimensions:</strong> ' . $file_size[0] . ' x ' . $file_size[1] . ' pixels';}/** * Override block core image render * @param string $block_content * @param array $block * @param WP_Block $instance * @return string  */function override_block_core_image_render( $block_content, $block, $instance ) {	if ( empty( $block['attrs']['id'] ) ) {		return $block_content;	}	$file_details = get_file_details_string( $block['attrs']['id'] );	if ( str_contains( $block_content, '</figcaption>' ) ) {		return str_replace( '</figcaption>', '<br />' . $file_details . '</figcaption>', $block_content );	}		return str_replace( '</figure>', '<figcpation>' . $file_details . '</figcpation></figure>', $block_content );}add_filter( 'render_block_core/image', 'override_block_core_image_render', 20, 3 );
       ```
   
 * you have to put that in your PHP functions file and then use an image block in
   Gutenberg editor in order to view the result
 * Best regards
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
    -  This reply was modified 1 year, 10 months ago by [Nicolas Langle](https://wordpress.org/support/users/nlangle/).
    -  This reply was modified 1 year, 10 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/).

Viewing 15 replies - 1 through 15 (of 23 total)

1 [2](https://wordpress.org/support/users/nlangle/replies/page/2/?output_format=md)
[→](https://wordpress.org/support/users/nlangle/replies/page/2/?output_format=md)