diff --git a/.version-data.json b/.version-data.json index d948058..af558a8 100644 --- a/.version-data.json +++ b/.version-data.json @@ -1,3 +1,3 @@ { - "version": "2025.1.2" + "version": "2026.0.0" } \ No newline at end of file diff --git a/package.json b/package.json index 14673ee..3847b97 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "wp-dsfr", - "version": "1.0.0", - "description": "DSFR theme and blocks for WordPress", + "version": "2026.0.0", + "description": "DSFR theme and blocks for WordPress", "author": "Be API", "repository": { "type": "git", @@ -14,9 +14,9 @@ "destroy": "wp-env destroy" }, "dependencies": { - "@wordpress/env": "^9.8.0" + "@wordpress/env": "^11.9.0" }, "volta": { - "node": "20.13.1" + "node": "24.11.0" } } diff --git a/wp-dsfr-blocks/.version-data.json b/wp-dsfr-blocks/.version-data.json index 996f0f6..eb4f8fd 100644 --- a/wp-dsfr-blocks/.version-data.json +++ b/wp-dsfr-blocks/.version-data.json @@ -1,4 +1,4 @@ { "slug": "wp-dsfr-blocks", - "version": "1.0.0" -} \ No newline at end of file + "version": "2026.0.0" +} diff --git a/wp-dsfr-blocks/package.json b/wp-dsfr-blocks/package.json index ffbfe70..02d9ee7 100644 --- a/wp-dsfr-blocks/package.json +++ b/wp-dsfr-blocks/package.json @@ -1,12 +1,12 @@ { "name": "wp-dsfr-blocks", - "version": "1.0.0", + "version": "2026.0.0", "description": "DSFR Gutenberg blocks for wp-dsfr-theme", "author": "Be API", - "repository": { - "type": "git", - "url": "https://github.com/BeAPI/wp-dsfr" - }, + "repository": { + "type": "git", + "url": "https://github.com/BeAPI/wp-dsfr" + }, "license": "GPL-2.0-or-later", "main": "build/index.js", "scripts": { @@ -23,7 +23,7 @@ "wp-dsfr-blocks.php" ], "devDependencies": { - "@wordpress/scripts": "^26.13.0", + "@wordpress/scripts": "^32.5.1", "classnames": "^2.3.1", "html-react-parser": "^5.1.10" }, @@ -32,6 +32,6 @@ "@wordpress/icons": "^9.49.0" }, "volta": { - "node": "20.13.1" + "node": "24.11.0" } } diff --git a/wp-dsfr-blocks/src/common/js/components/DSFRColorSelectControl.js b/wp-dsfr-blocks/src/common/js/components/DSFRColorSelectControl.js index f31675f..1b04df4 100644 --- a/wp-dsfr-blocks/src/common/js/components/DSFRColorSelectControl.js +++ b/wp-dsfr-blocks/src/common/js/components/DSFRColorSelectControl.js @@ -2,29 +2,29 @@ import { __ } from '@wordpress/i18n'; import { SelectControl } from '@wordpress/components'; import getDSFRColorList from '../utils/getDSFRColorList'; -export default function (props) { +export default function ( props ) { const colorsList = getDSFRColorList(); const options = [ { - label: __('Défaut', 'wp-dsfr-blocks'), + label: __( 'Défaut', 'wp-dsfr-blocks' ), value: '', }, ]; - for (const color in colorsList) { - options.push({ - label: colorsList[color], + for ( const color in colorsList ) { + options.push( { + label: colorsList[ color ], value: color, - }); + } ); } props = Object.assign( { - label: __('Couleur du bloc', 'wp-dsfr-blocks'), + label: __( 'Couleur du bloc', 'wp-dsfr-blocks' ), }, props, { options } ); - return ; + return ; } diff --git a/wp-dsfr-blocks/src/common/js/components/IconRaw.js b/wp-dsfr-blocks/src/common/js/components/IconRaw.js index 923f60d..f028ed5 100644 --- a/wp-dsfr-blocks/src/common/js/components/IconRaw.js +++ b/wp-dsfr-blocks/src/common/js/components/IconRaw.js @@ -7,30 +7,33 @@ import parse from 'html-react-parser'; */ import { Icon } from '@wordpress/components'; -export default function IconRaw({ content }) { - if (!Boolean(content)) { +export default function IconRaw( { content } ) { + if ( ! Boolean( content ) ) { return <>; } return ( - parse(content, { + icon={ () => + parse( content, { trim: true, - replace: (domNode) => { - if (domNode.type === 'tag' && domNode.name === 'svg') { + replace: ( domNode ) => { + if ( + domNode.type === 'tag' && + domNode.name === 'svg' + ) { domNode.attribs.focusable = 'false'; - domNode.attribs['aria-hidden'] = 'true'; + domNode.attribs[ 'aria-hidden' ] = 'true'; } if ( domNode.type !== 'tag' || - (!domNode.parent && domNode.name !== 'svg') || - !domNode.name + ( ! domNode.parent && domNode.name !== 'svg' ) || + ! domNode.name ) { return <>; } }, - }) + } ) } /> ); diff --git a/wp-dsfr-blocks/src/common/js/utils/getDSFRColorList.js b/wp-dsfr-blocks/src/common/js/utils/getDSFRColorList.js index 0e60bfc..c879e3c 100644 --- a/wp-dsfr-blocks/src/common/js/utils/getDSFRColorList.js +++ b/wp-dsfr-blocks/src/common/js/utils/getDSFRColorList.js @@ -2,22 +2,22 @@ import { __ } from '@wordpress/i18n'; export default function () { return { - 'green-tilleul-verveine': __('Tilleul verveine', 'wp-dsfr-theme'), - 'green-bourgeon': __('Bourgeon', 'wp-dsfr-theme'), - 'green-emeraude': __('Émeraude', 'wp-dsfr-theme'), - 'green-menthe': __('Menthe', 'wp-dsfr-theme'), - 'green-archipel': __('Archipel', 'wp-dsfr-theme'), - 'blue-ecume': __('Écume', 'wp-dsfr-theme'), - 'blue-cumulus': __('Cumulus', 'wp-dsfr-theme'), - 'purple-glycine': __('Glycine', 'wp-dsfr-theme'), - 'pink-macaron': __('Macaron', 'wp-dsfr-theme'), - 'pink-tuile': __('Tuile', 'wp-dsfr-theme'), - 'yellow-tournesol': __('Tournesol', 'wp-dsfr-theme'), - 'yellow-moutarde': __('Moutarde', 'wp-dsfr-theme'), - 'orange-terre-battue': __('Terre battue', 'wp-dsfr-theme'), - 'brown-cafe-creme': __('Café crème', 'wp-dsfr-theme'), - 'brown-caramel': __('Caramel', 'wp-dsfr-theme'), - 'brown-opera': __('Opéra', 'wp-dsfr-theme'), - 'beige-gris-galet': __('Gris galet', 'wp-dsfr-theme'), + 'green-tilleul-verveine': __( 'Tilleul verveine', 'wp-dsfr-theme' ), + 'green-bourgeon': __( 'Bourgeon', 'wp-dsfr-theme' ), + 'green-emeraude': __( 'Émeraude', 'wp-dsfr-theme' ), + 'green-menthe': __( 'Menthe', 'wp-dsfr-theme' ), + 'green-archipel': __( 'Archipel', 'wp-dsfr-theme' ), + 'blue-ecume': __( 'Écume', 'wp-dsfr-theme' ), + 'blue-cumulus': __( 'Cumulus', 'wp-dsfr-theme' ), + 'purple-glycine': __( 'Glycine', 'wp-dsfr-theme' ), + 'pink-macaron': __( 'Macaron', 'wp-dsfr-theme' ), + 'pink-tuile': __( 'Tuile', 'wp-dsfr-theme' ), + 'yellow-tournesol': __( 'Tournesol', 'wp-dsfr-theme' ), + 'yellow-moutarde': __( 'Moutarde', 'wp-dsfr-theme' ), + 'orange-terre-battue': __( 'Terre battue', 'wp-dsfr-theme' ), + 'brown-cafe-creme': __( 'Café crème', 'wp-dsfr-theme' ), + 'brown-caramel': __( 'Caramel', 'wp-dsfr-theme' ), + 'brown-opera': __( 'Opéra', 'wp-dsfr-theme' ), + 'beige-gris-galet': __( 'Gris galet', 'wp-dsfr-theme' ), }; } diff --git a/wp-dsfr-blocks/src/common/js/utils/isValidURL.js b/wp-dsfr-blocks/src/common/js/utils/isValidURL.js index f69f911..d8f44eb 100644 --- a/wp-dsfr-blocks/src/common/js/utils/isValidURL.js +++ b/wp-dsfr-blocks/src/common/js/utils/isValidURL.js @@ -1,6 +1,6 @@ -export default function (str) { +export default function ( str ) { try { - new URL(str); + new URL( str ); } catch { return false; } diff --git a/wp-dsfr-blocks/src/common/js/utils/setDSFRBlockClassName.js b/wp-dsfr-blocks/src/common/js/utils/setDSFRBlockClassName.js index a5707ad..a4c9a62 100644 --- a/wp-dsfr-blocks/src/common/js/utils/setDSFRBlockClassName.js +++ b/wp-dsfr-blocks/src/common/js/utils/setDSFRBlockClassName.js @@ -1,5 +1,5 @@ -export default function (blockProps, searchSuffix, replacement) { - if (!blockProps.className) { +export default function ( blockProps, searchSuffix, replacement ) { + if ( ! blockProps.className ) { blockProps.className = ''; } @@ -8,5 +8,5 @@ export default function (blockProps, searchSuffix, replacement) { typeof replacement !== 'undefined' ? replacement : searchSuffix ); - blockProps.className = blockProps.className.replace('wp-block', ''); + blockProps.className = blockProps.className.replace( 'wp-block', '' ); } diff --git a/wp-dsfr-blocks/src/common/js/utils/uniqid.js b/wp-dsfr-blocks/src/common/js/utils/uniqid.js index d4be86d..b4a05f8 100644 --- a/wp-dsfr-blocks/src/common/js/utils/uniqid.js +++ b/wp-dsfr-blocks/src/common/js/utils/uniqid.js @@ -1,3 +1,3 @@ -export default function (prefix) { - return prefix + '-' + Math.round(Math.random() * 16777215).toString(32); +export default function ( prefix ) { + return prefix + '-' + Math.round( Math.random() * 16777215 ).toString( 32 ); } diff --git a/wp-dsfr-blocks/src/fr-accordion-title/block.json b/wp-dsfr-blocks/src/fr-accordion-title/block.json index eb3f13c..ff8bf9e 100644 --- a/wp-dsfr-blocks/src/fr-accordion-title/block.json +++ b/wp-dsfr-blocks/src/fr-accordion-title/block.json @@ -2,7 +2,7 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "dsfr/fr-accordion-title", - "parent": ["dsfr/fr-accordion"], + "parent": [ "dsfr/fr-accordion" ], "version": "1.0.0", "title": "Titre d'accordéon", "category": "widgets", @@ -29,7 +29,7 @@ "default": "" } }, - "usesContext": ["dsfr/fr-accordion--id"], + "usesContext": [ "dsfr/fr-accordion--id" ], "textdomain": "wp-dsfr-blocks", "editorScript": "file:./index.js" } diff --git a/wp-dsfr-blocks/src/fr-accordion-title/edit.js b/wp-dsfr-blocks/src/fr-accordion-title/edit.js index 4022148..99f9d68 100644 --- a/wp-dsfr-blocks/src/fr-accordion-title/edit.js +++ b/wp-dsfr-blocks/src/fr-accordion-title/edit.js @@ -3,13 +3,13 @@ import { useBlockProps, RichText } from '@wordpress/block-editor'; import { useEffect } from '@wordpress/element'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function Edit({ attributes, setAttributes, context }) { +export default function Edit( { attributes, setAttributes, context } ) { const blockProps = useBlockProps(); const { label } = attributes; - useEffect(() => { - setAttributes({ ariaControls: context['dsfr/fr-accordion--id'] }); - }, [context['dsfr/fr-accordion--id']]); + useEffect( () => { + setAttributes( { ariaControls: context[ 'dsfr/fr-accordion--id' ] } ); + }, [ context[ 'dsfr/fr-accordion--id' ] ] ); setDSFRBlockClassName( blockProps, @@ -18,16 +18,16 @@ export default function Edit({ attributes, setAttributes, context }) { ); return ( -

+

{ - setAttributes({ label: content }); - }} + allowedFormats={ [] } + value={ label } + placeholder={ __( "Titre de l'accordéon", 'wp-dsfr-blocks' ) } + onChange={ ( content ) => { + setAttributes( { label: content } ); + } } />

); diff --git a/wp-dsfr-blocks/src/fr-accordion-title/index.js b/wp-dsfr-blocks/src/fr-accordion-title/index.js index 7d10d6a..d0cda98 100644 --- a/wp-dsfr-blocks/src/fr-accordion-title/index.js +++ b/wp-dsfr-blocks/src/fr-accordion-title/index.js @@ -3,7 +3,7 @@ import Edit from './edit'; import save from './save'; import metadata from './block.json'; -registerBlockType(metadata.name, { +registerBlockType( metadata.name, { edit: Edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-accordion-title/save.js b/wp-dsfr-blocks/src/fr-accordion-title/save.js index be108df..862bcd1 100644 --- a/wp-dsfr-blocks/src/fr-accordion-title/save.js +++ b/wp-dsfr-blocks/src/fr-accordion-title/save.js @@ -1,7 +1,7 @@ import { useBlockProps } from '@wordpress/block-editor'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function save({ attributes: { label, ariaControls } }) { +export default function save( { attributes: { label, ariaControls } } ) { const blockProps = useBlockProps.save(); setDSFRBlockClassName( @@ -11,13 +11,13 @@ export default function save({ attributes: { label, ariaControls } }) { ); return ( -

+

); diff --git a/wp-dsfr-blocks/src/fr-accordion/block.json b/wp-dsfr-blocks/src/fr-accordion/block.json index c38888d..e85d865 100644 --- a/wp-dsfr-blocks/src/fr-accordion/block.json +++ b/wp-dsfr-blocks/src/fr-accordion/block.json @@ -2,7 +2,7 @@ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "dsfr/fr-accordion", - "parent": ["dsfr/fr-accordions-group"], + "parent": [ "dsfr/fr-accordions-group" ], "version": "1.0.0", "title": "Accordéons", "category": "widgets", diff --git a/wp-dsfr-blocks/src/fr-accordion/edit.js b/wp-dsfr-blocks/src/fr-accordion/edit.js index 52e802b..889326d 100644 --- a/wp-dsfr-blocks/src/fr-accordion/edit.js +++ b/wp-dsfr-blocks/src/fr-accordion/edit.js @@ -3,19 +3,19 @@ import { useEffect } from '@wordpress/element'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; import uniqid from '../common/js/utils/uniqid'; -export default function Edit({ setAttributes }) { +export default function Edit( { setAttributes } ) { const blockProps = useBlockProps(); - const innerBlocksProps = useInnerBlocksProps(blockProps, { + const innerBlocksProps = useInnerBlocksProps( blockProps, { directInsert: false, templateLock: 'all', - template: [['dsfr/fr-accordion-title'], ['dsfr/fr-collapse']], - }); + template: [ [ 'dsfr/fr-accordion-title' ], [ 'dsfr/fr-collapse' ] ], + } ); - useEffect(() => { - setAttributes({ id: uniqid('fr-collapse') }); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + useEffect( () => { + setAttributes( { id: uniqid( 'fr-collapse' ) } ); + }, [] ); // eslint-disable-line react-hooks/exhaustive-deps - setDSFRBlockClassName(innerBlocksProps, 'fr-accordion'); + setDSFRBlockClassName( innerBlocksProps, 'fr-accordion' ); - return
; + return
; } diff --git a/wp-dsfr-blocks/src/fr-accordion/index.js b/wp-dsfr-blocks/src/fr-accordion/index.js index 7d10d6a..d0cda98 100644 --- a/wp-dsfr-blocks/src/fr-accordion/index.js +++ b/wp-dsfr-blocks/src/fr-accordion/index.js @@ -3,7 +3,7 @@ import Edit from './edit'; import save from './save'; import metadata from './block.json'; -registerBlockType(metadata.name, { +registerBlockType( metadata.name, { edit: Edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-accordion/save.js b/wp-dsfr-blocks/src/fr-accordion/save.js index dd27282..35818d9 100644 --- a/wp-dsfr-blocks/src/fr-accordion/save.js +++ b/wp-dsfr-blocks/src/fr-accordion/save.js @@ -2,9 +2,9 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; export default function save() { - const innerBlocksProps = useInnerBlocksProps.save(useBlockProps.save()); + const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() ); - setDSFRBlockClassName(innerBlocksProps, 'fr-accordion'); + setDSFRBlockClassName( innerBlocksProps, 'fr-accordion' ); - return
; + return
; } diff --git a/wp-dsfr-blocks/src/fr-accordions-group-faq/FaqList.js b/wp-dsfr-blocks/src/fr-accordions-group-faq/FaqList.js index b9bcf61..4b9f4ae 100644 --- a/wp-dsfr-blocks/src/fr-accordions-group-faq/FaqList.js +++ b/wp-dsfr-blocks/src/fr-accordions-group-faq/FaqList.js @@ -8,118 +8,121 @@ import { chevronUp, chevronDown, trash, plusCircle } from '@wordpress/icons'; import { RichText } from '@wordpress/block-editor'; import uniqid from '../common/js/utils/uniqid'; -export default function FaqList({ questions, onChange, isBlockSelected }) { - const [activeAccordionId, setActiveAccordionId] = useState(''); +export default function FaqList( { questions, onChange, isBlockSelected } ) { + const [ activeAccordionId, setActiveAccordionId ] = useState( '' ); // set questions as a new array to force update - questions = [...questions]; + questions = [ ...questions ]; - const arrayMove = (indexFrom, indexTo) => { - const question = questions[indexFrom]; + const arrayMove = ( indexFrom, indexTo ) => { + const question = questions[ indexFrom ]; - questions[indexFrom] = questions[indexTo]; - questions[indexTo] = question; + questions[ indexFrom ] = questions[ indexTo ]; + questions[ indexTo ] = question; - onChange(questions); + onChange( questions ); }; const onAddElement = () => { - questions.push({ - id: uniqid('fr-accordion'), - collapseId: uniqid('fr-collapse'), + questions.push( { + id: uniqid( 'fr-accordion' ), + collapseId: uniqid( 'fr-collapse' ), question: '', answer: '', - }); - onChange(questions); + } ); + onChange( questions ); }; - const onRemoveElement = (removedIndex) => { - questions.splice(removedIndex, 1); - onChange(questions); + const onRemoveElement = ( removedIndex ) => { + questions.splice( removedIndex, 1 ); + onChange( questions ); }; - const onMoveUpElement = (index) => { - arrayMove(index, index - 1); + const onMoveUpElement = ( index ) => { + arrayMove( index, index - 1 ); }; - const onMoveDownElement = (index) => { - arrayMove(index, index + 1); + const onMoveDownElement = ( index ) => { + arrayMove( index, index + 1 ); }; - const updateQuestion = (index, question) => { - questions[index].question = question; - onChange(questions); + const updateQuestion = ( index, question ) => { + questions[ index ].question = question; + onChange( questions ); }; - const updateAnswer = (index, answer) => { - questions[index].answer = answer; - onChange(questions); + const updateAnswer = ( index, answer ) => { + questions[ index ].answer = answer; + onChange( questions ); }; return ( <> - {questions.map((item, index) => ( + { questions.map( ( item, index ) => (
- {index !== 0 && ( + { index !== 0 && (

- updateQuestion(index, content) + value={ item.question } // Any existing content, either from the database or an attribute default + allowedFormats={ [] } // Allow the content to be made bold or italic, but do not allow other formatting options + onChange={ ( content ) => + updateQuestion( index, content ) } // Store updated content as a block attribute - onClick={() => { - setActiveAccordionId(item.id); - }} - placeholder={__('Question…?', 'faq-block')} // Display this text before any content has been added by the user + onClick={ () => { + setActiveAccordionId( item.id ); + } } + placeholder={ __( 'Question…?', 'faq-block' ) } // Display this text before any content has been added by the user />

@@ -127,26 +130,26 @@ export default function FaqList({ questions, onChange, isBlockSelected }) {
- updateAnswer(index, content) + value={ item.answer } // Any existing content, either from the database or an attribute default + onChange={ ( content ) => + updateAnswer( index, content ) } // Store updated content as a block attribute - placeholder={__('Answer…', 'faq-block')} // Display this text before any content has been added by the user + placeholder={ __( 'Answer…', 'faq-block' ) } // Display this text before any content has been added by the user />
- ))} + ) ) } - )} + ) } />
- )} + ) } diff --git a/wp-dsfr-blocks/src/fr-quote/index.js b/wp-dsfr-blocks/src/fr-quote/index.js index 69edbd8..835b0ce 100644 --- a/wp-dsfr-blocks/src/fr-quote/index.js +++ b/wp-dsfr-blocks/src/fr-quote/index.js @@ -4,8 +4,8 @@ import Edit from './edit'; import save from './save'; import metadata from './block.json'; -registerBlockType(metadata.name, { +registerBlockType( metadata.name, { icon, edit: Edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-quote/save.js b/wp-dsfr-blocks/src/fr-quote/save.js index ee22a22..59928b8 100644 --- a/wp-dsfr-blocks/src/fr-quote/save.js +++ b/wp-dsfr-blocks/src/fr-quote/save.js @@ -3,26 +3,26 @@ import classNames from 'classnames'; import isValidURL from '../common/js/utils/isValidURL'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function save({ attributes }) { +export default function save( { attributes } ) { const hasImage = attributes.displayImage && attributes.imageUrl; - const cite = isValidURL(attributes.cite) ? attributes.cite : ''; + const cite = isValidURL( attributes.cite ) ? attributes.cite : ''; const classes = { 'fr-quote--column': attributes.displayImage, }; - if (attributes.color) { - classes['fr-quote--' + attributes.color] = true; + if ( attributes.color ) { + classes[ 'fr-quote--' + attributes.color ] = true; } - const blockProps = useBlockProps.save({ - className: classNames(classes), - }); + const blockProps = useBlockProps.save( { + className: classNames( classes ), + } ); - setDSFRBlockClassName(blockProps, 'fr-quote'); + setDSFRBlockClassName( blockProps, 'fr-quote' ); return ( -
-
+
+
- {attributes.sources.length ? ( + { attributes.sources.length ? (
    - {attributes.sources.map((source, index) => + { attributes.sources.map( ( source, index ) => source ? ( ) : ( '' ) - )} + ) }
) : ( '' - )} - {hasImage && ( + ) } + { hasImage && (
{attributes.imageAlt}
- )} + ) }
); diff --git a/wp-dsfr-blocks/src/fr-tabs-list-item/ComposeBlockControls.js b/wp-dsfr-blocks/src/fr-tabs-list-item/ComposeBlockControls.js index e59c7cc..1e28ad9 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list-item/ComposeBlockControls.js +++ b/wp-dsfr-blocks/src/fr-tabs-list-item/ComposeBlockControls.js @@ -5,71 +5,71 @@ import { compose } from '@wordpress/compose'; import { createBlock } from '@wordpress/blocks'; import { ToolbarGroup } from '@wordpress/components'; -const ComposeBlockControls = ({ +const ComposeBlockControls = ( { index, count, onMoveDown, onMoveUp, onRemoveBlocks, onInsertBlock, -}) => ( +} ) => ( { - onMoveUp(index); + onMoveUp( index ); }, }, { icon: 'arrow-right-alt2', - title: __("Placer l'item après", 'wp-dsfr-blocks'), + title: __( "Placer l'item après", 'wp-dsfr-blocks' ), isDisabled: count === index + 1, onClick: () => { - onMoveDown(index); + onMoveDown( index ); }, }, - ]} + ] } /> { - onInsertBlock(index); + onInsertBlock( index ); }, }, { icon: 'table-col-after', - title: __('Ajouter un item après', 'wp-dsfr-blocks'), + title: __( 'Ajouter un item après', 'wp-dsfr-blocks' ), onClick: () => { - onInsertBlock(index + 1); + onInsertBlock( index + 1 ); }, }, { icon: 'trash', - title: __("Supprimer l'item", 'wp-dsfr-blocks'), + title: __( "Supprimer l'item", 'wp-dsfr-blocks' ), onClick: () => { - onRemoveBlocks(index); + onRemoveBlocks( index ); }, }, - ]} + ] } /> ); -export default compose([ - withSelect((select, ownProps) => { +export default compose( [ + withSelect( ( select, ownProps ) => { const { getBlockOrder, getBlockRootClientId } = - select('core/block-editor'); - const tabsListId = getBlockRootClientId(ownProps.clientId); - const tabsListItemIds = getBlockOrder(tabsListId); - const tabsId = getBlockRootClientId(tabsListId); - const tabsPanelIds = [...getBlockOrder(tabsId)]; + select( 'core/block-editor' ); + const tabsListId = getBlockRootClientId( ownProps.clientId ); + const tabsListItemIds = getBlockOrder( tabsListId ); + const tabsId = getBlockRootClientId( tabsListId ); + const tabsPanelIds = [ ...getBlockOrder( tabsId ) ]; // remove tabs list id tabsPanelIds.shift(); @@ -83,77 +83,77 @@ export default compose([ clientId: ownProps.clientId, index: ownProps.index, }; - }), + } ), withDispatch( - (dispatch, { tabsListItemIds, tabsListId, tabsPanelIds, tabsId }) => { + ( dispatch, { tabsListItemIds, tabsListId, tabsPanelIds, tabsId } ) => { const { removeBlock, moveBlocksDown, moveBlocksUp, insertBlock, updateBlockAttributes, - } = dispatch('core/block-editor'); + } = dispatch( 'core/block-editor' ); return { - onMoveDown(index) { + onMoveDown( index ) { updateBlockAttributes( - [tabsListItemIds[index], tabsPanelIds[index]], + [ tabsListItemIds[ index ], tabsPanelIds[ index ] ], { lock: { move: false, remove: true }, } ); - moveBlocksDown([tabsPanelIds[index]], tabsId); - moveBlocksDown([tabsListItemIds[index]], tabsListId); + moveBlocksDown( [ tabsPanelIds[ index ] ], tabsId ); + moveBlocksDown( [ tabsListItemIds[ index ] ], tabsListId ); updateBlockAttributes( - [tabsListItemIds[index], tabsPanelIds[index]], + [ tabsListItemIds[ index ], tabsPanelIds[ index ] ], { lock: { move: true, remove: true }, } ); }, - onMoveUp(index) { + onMoveUp( index ) { updateBlockAttributes( - [tabsListItemIds[index], tabsPanelIds[index]], + [ tabsListItemIds[ index ], tabsPanelIds[ index ] ], { lock: { move: false, remove: true }, } ); - moveBlocksUp([tabsPanelIds[index]], tabsId); - moveBlocksUp([tabsListItemIds[index]], tabsListId); + moveBlocksUp( [ tabsPanelIds[ index ] ], tabsId ); + moveBlocksUp( [ tabsListItemIds[ index ] ], tabsListId ); updateBlockAttributes( - [tabsListItemIds[index], tabsPanelIds[index]], + [ tabsListItemIds[ index ], tabsPanelIds[ index ] ], { lock: { move: true, remove: true }, } ); }, - onRemoveBlocks(index) { + onRemoveBlocks( index ) { updateBlockAttributes( - [tabsListItemIds[index], tabsPanelIds[index]], + [ tabsListItemIds[ index ], tabsPanelIds[ index ] ], { lock: { move: true, remove: false }, } ); - removeBlock(tabsPanelIds[index]); - removeBlock(tabsListItemIds[index]); + removeBlock( tabsPanelIds[ index ] ); + removeBlock( tabsListItemIds[ index ] ); }, - onInsertBlock(index) { - const listItem = createBlock('dsfr/fr-tabs-list-item', { + onInsertBlock( index ) { + const listItem = createBlock( 'dsfr/fr-tabs-list-item', { lock: { move: true, remove: true }, - }); - const panel = createBlock('dsfr/fr-tabs-panel', { + } ); + const panel = createBlock( 'dsfr/fr-tabs-panel', { lock: { move: true, remove: true }, - }); + } ); - insertBlock(panel, index + 1, tabsId); - insertBlock(listItem, index, tabsListId); + insertBlock( panel, index + 1, tabsId ); + insertBlock( listItem, index, tabsListId ); }, }; } ), -])(ComposeBlockControls); +] )( ComposeBlockControls ); diff --git a/wp-dsfr-blocks/src/fr-tabs-list-item/block.json b/wp-dsfr-blocks/src/fr-tabs-list-item/block.json index 3c9a9b3..64a7ab2 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list-item/block.json +++ b/wp-dsfr-blocks/src/fr-tabs-list-item/block.json @@ -7,7 +7,7 @@ "category": "widgets", "icon": "button", "description": "Bloc DSFR onglet.", - "parent": ["dsfr/fr-tabs-list"], + "parent": [ "dsfr/fr-tabs-list" ], "supports": { "html": false, "anchor": false, @@ -45,7 +45,7 @@ "value": false } }, - "usesContext": ["dsfr/fr-tabs--id", "dsfr/fr-tabs--active-tab-index"], + "usesContext": [ "dsfr/fr-tabs--id", "dsfr/fr-tabs--active-tab-index" ], "textdomain": "wp-dsfr-blocks", "editorScript": "file:./index.js" } diff --git a/wp-dsfr-blocks/src/fr-tabs-list-item/edit.js b/wp-dsfr-blocks/src/fr-tabs-list-item/edit.js index dce5093..5d1c102 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list-item/edit.js +++ b/wp-dsfr-blocks/src/fr-tabs-list-item/edit.js @@ -9,72 +9,72 @@ import { select } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import ComposeBlockControls from './ComposeBlockControls'; -export default function Edit({ +export default function Edit( { attributes: { label, id, controls, buttonClassName }, setAttributes, clientId, context, -}) { - const buttonClassNames = ['fr-tabs__tab', buttonClassName]; - const activeTabIndex = context['dsfr/fr-tabs--active-tab-index']; - const index = select('core/block-editor').getBlockIndex(clientId); - const contextId = context['dsfr/fr-tabs--id'] + '-tab-' + index; - const contextControls = context['dsfr/fr-tabs--id'] + '-panel-' + index; +} ) { + const buttonClassNames = [ 'fr-tabs__tab', buttonClassName ]; + const activeTabIndex = context[ 'dsfr/fr-tabs--active-tab-index' ]; + const index = select( 'core/block-editor' ).getBlockIndex( clientId ); + const contextId = context[ 'dsfr/fr-tabs--id' ] + '-tab-' + index; + const contextControls = context[ 'dsfr/fr-tabs--id' ] + '-panel-' + index; - useEffect(() => { - setAttributes({ + useEffect( () => { + setAttributes( { index, id: contextId, controls: contextControls, - }); - }, [index, contextId, contextControls]); + } ); + }, [ index, contextId, contextControls ] ); if ( - buttonClassName.includes('fr-icon-') && - !buttonClassName.includes('fr-tabs__tab--icon-left') + buttonClassName.includes( 'fr-icon-' ) && + ! buttonClassName.includes( 'fr-tabs__tab--icon-left' ) ) { - buttonClassNames.push('fr-tabs__tab--icon-left'); + buttonClassNames.push( 'fr-tabs__tab--icon-left' ); } return ( <> - setAttributes({ buttonClassName }) + ) } + onChange={ ( buttonClassName ) => + setAttributes( { buttonClassName } ) } /> - -
  • + +
  • { - setAttributes({ label: newLabel }); - }} + className={ buttonClassNames.join( ' ' ).trim() } + allowedFormats={ [] } + value={ label } + id={ id } + aria-selected={ activeTabIndex === index } + aria-controls={ controls } + placeholder={ __( 'Item…', 'wp-dsfr-blocks' ) } + onChange={ ( newLabel ) => { + setAttributes( { label: newLabel } ); + } } />
    • diff --git a/wp-dsfr-blocks/src/fr-tabs-list-item/index.js b/wp-dsfr-blocks/src/fr-tabs-list-item/index.js index 03b3968..748ad26 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list-item/index.js +++ b/wp-dsfr-blocks/src/fr-tabs-list-item/index.js @@ -5,8 +5,8 @@ import metadata from './block.json'; import { Icon, alignWide } from '@beapi/icons'; -registerBlockType(metadata.name, { - icon: , +registerBlockType( metadata.name, { + icon: , edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-tabs-list-item/save.js b/wp-dsfr-blocks/src/fr-tabs-list-item/save.js index d7a355f..d758a61 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list-item/save.js +++ b/wp-dsfr-blocks/src/fr-tabs-list-item/save.js @@ -1,15 +1,15 @@ import { RichText } from '@wordpress/block-editor'; -export default function save({ +export default function save( { attributes: { label, controls, id, index, buttonClassName }, -}) { - const buttonClassNames = ['fr-tabs__tab', buttonClassName]; +} ) { + const buttonClassNames = [ 'fr-tabs__tab', buttonClassName ]; if ( - buttonClassName.includes('fr-icon-') && - !buttonClassName.includes('fr-tabs__tab--icon-left') + buttonClassName.includes( 'fr-icon-' ) && + ! buttonClassName.includes( 'fr-tabs__tab--icon-left' ) ) { - buttonClassNames.push('fr-tabs__tab--icon-left'); + buttonClassNames.push( 'fr-tabs__tab--icon-left' ); } return ( @@ -17,11 +17,11 @@ export default function save({ ); diff --git a/wp-dsfr-blocks/src/fr-tabs-list/block.json b/wp-dsfr-blocks/src/fr-tabs-list/block.json index dc04884..3e4bf57 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list/block.json +++ b/wp-dsfr-blocks/src/fr-tabs-list/block.json @@ -7,7 +7,7 @@ "category": "widgets", "icon": "menu", "description": "Bloc DSFR liste d'onglets.", - "parent": ["dsfr/fr-tabs"], + "parent": [ "dsfr/fr-tabs" ], "supports": { "html": false, "anchor": false, @@ -15,7 +15,7 @@ "lock": false, "reusable": false }, - "usesContext": ["dsfr/fr-tabs"], + "usesContext": [ "dsfr/fr-tabs" ], "textdomain": "wp-dsfr-blocks", "editorScript": "file:./index.js" } diff --git a/wp-dsfr-blocks/src/fr-tabs-list/edit.js b/wp-dsfr-blocks/src/fr-tabs-list/edit.js index b9736f0..f07049d 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list/edit.js +++ b/wp-dsfr-blocks/src/fr-tabs-list/edit.js @@ -3,20 +3,20 @@ import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; export default function Edit() { const blockProps = useBlockProps(); - const innerBlocksProps = useInnerBlocksProps(blockProps, { - allowedBlocks: ['dsfr/fr-tabs-list-item'], + const innerBlocksProps = useInnerBlocksProps( blockProps, { + allowedBlocks: [ 'dsfr/fr-tabs-list-item' ], directInsert: false, orientation: 'horizontal', templateLock: false, - template: new Array(3).fill([ + template: new Array( 3 ).fill( [ 'dsfr/fr-tabs-list-item', { lock: { move: true, remove: true } }, - ]), + ] ), templateInsertUpdatesSelection: true, renderAppender: false, - }); + } ); - setDSFRBlockClassName(innerBlocksProps, 'fr-tabs-list', 'fr-tabs__list'); + setDSFRBlockClassName( innerBlocksProps, 'fr-tabs-list', 'fr-tabs__list' ); - return
      ; + return
        ; } diff --git a/wp-dsfr-blocks/src/fr-tabs-list/index.js b/wp-dsfr-blocks/src/fr-tabs-list/index.js index 690f169..76613d8 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list/index.js +++ b/wp-dsfr-blocks/src/fr-tabs-list/index.js @@ -5,8 +5,8 @@ import metadata from './block.json'; import { Icon, navigation } from '@beapi/icons'; -registerBlockType(metadata.name, { - icon: , +registerBlockType( metadata.name, { + icon: , /** * @see ./edit.js */ @@ -16,4 +16,4 @@ registerBlockType(metadata.name, { * @see ./save.js */ save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-tabs-list/save.js b/wp-dsfr-blocks/src/fr-tabs-list/save.js index bb28a23..a6dd5ec 100644 --- a/wp-dsfr-blocks/src/fr-tabs-list/save.js +++ b/wp-dsfr-blocks/src/fr-tabs-list/save.js @@ -2,9 +2,9 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; export default function save() { - const innerBlocksProps = useInnerBlocksProps.save(useBlockProps.save()); + const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() ); - setDSFRBlockClassName(innerBlocksProps, 'fr-tabs-list', 'fr-tabs__list'); + setDSFRBlockClassName( innerBlocksProps, 'fr-tabs-list', 'fr-tabs__list' ); - return
          ; + return
            ; } diff --git a/wp-dsfr-blocks/src/fr-tabs-panel/block.json b/wp-dsfr-blocks/src/fr-tabs-panel/block.json index c3eef3a..c1908b0 100644 --- a/wp-dsfr-blocks/src/fr-tabs-panel/block.json +++ b/wp-dsfr-blocks/src/fr-tabs-panel/block.json @@ -7,7 +7,7 @@ "category": "widgets", "icon": "layout", "description": "Bloc DSFR contenu onglet.", - "parent": ["dsfr/fr-tabs"], + "parent": [ "dsfr/fr-tabs" ], "supports": { "html": false, "anchor": false, @@ -33,7 +33,7 @@ "default": "" } }, - "usesContext": ["dsfr/fr-tabs--id", "dsfr/fr-tabs--active-tab-index"], + "usesContext": [ "dsfr/fr-tabs--id", "dsfr/fr-tabs--active-tab-index" ], "textdomain": "wp-dsfr-blocks", "editorScript": "file:./index.js" } diff --git a/wp-dsfr-blocks/src/fr-tabs-panel/edit.js b/wp-dsfr-blocks/src/fr-tabs-panel/edit.js index fd412f8..725e633 100644 --- a/wp-dsfr-blocks/src/fr-tabs-panel/edit.js +++ b/wp-dsfr-blocks/src/fr-tabs-panel/edit.js @@ -4,52 +4,52 @@ import { select } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function Edit({ +export default function Edit( { attributes: { id, labelledby }, setAttributes, clientId, context, -}) { - const activeTabIndex = context['dsfr/fr-tabs--active-tab-index']; - const index = select('core/block-editor').getBlockIndex(clientId) - 1; - const blockProps = useBlockProps({ - className: classNames({ +} ) { + const activeTabIndex = context[ 'dsfr/fr-tabs--active-tab-index' ]; + const index = select( 'core/block-editor' ).getBlockIndex( clientId ) - 1; + const blockProps = useBlockProps( { + className: classNames( { 'fr-tabs__panel--selected': activeTabIndex === index, - }), - }); - const contextId = context['dsfr/fr-tabs--id'] + '-panel-' + index; - const contextLabelledBy = context['dsfr/fr-tabs--id'] + '-tab-' + index; - const allowedBlocks = select('core/blocks') + } ), + } ); + const contextId = context[ 'dsfr/fr-tabs--id' ] + '-panel-' + index; + const contextLabelledBy = context[ 'dsfr/fr-tabs--id' ] + '-tab-' + index; + const allowedBlocks = select( 'core/blocks' ) .getBlockTypes() - .map((block) => { + .map( ( block ) => { return block.name; - }) - .filter((blockName) => { + } ) + .filter( ( blockName ) => { return ( blockName !== 'dsfr/fr-tabs' && blockName !== 'dsfr/fr-tabs-list' && blockName !== 'dsfr/fr-tabs-list-item' && blockName !== 'dsfr/fr-tabs-panel' ); - }); + } ); - useEffect(() => { - setAttributes({ + useEffect( () => { + setAttributes( { index, id: contextId, labelledby: contextLabelledBy, - }); - }, [index, contextId, contextLabelledBy]); + } ); + }, [ index, contextId, contextLabelledBy ] ); - setDSFRBlockClassName(blockProps, 'fr-tabs-panel', 'fr-tabs__panel'); + setDSFRBlockClassName( blockProps, 'fr-tabs-panel', 'fr-tabs__panel' ); return ( -
            +
            ); diff --git a/wp-dsfr-blocks/src/fr-tabs-panel/index.js b/wp-dsfr-blocks/src/fr-tabs-panel/index.js index 6029a95..7987f71 100644 --- a/wp-dsfr-blocks/src/fr-tabs-panel/index.js +++ b/wp-dsfr-blocks/src/fr-tabs-panel/index.js @@ -5,8 +5,8 @@ import metadata from './block.json'; import { Icon, plus } from '@beapi/icons'; -registerBlockType(metadata.name, { - icon: , +registerBlockType( metadata.name, { + icon: , edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-tabs-panel/save.js b/wp-dsfr-blocks/src/fr-tabs-panel/save.js index 336f6d6..242f070 100644 --- a/wp-dsfr-blocks/src/fr-tabs-panel/save.js +++ b/wp-dsfr-blocks/src/fr-tabs-panel/save.js @@ -2,20 +2,20 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import classNames from 'classnames'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function save({ attributes: { id, labelledby, index } }) { - const blockProps = useBlockProps.save({ - className: classNames({ +export default function save( { attributes: { id, labelledby, index } } ) { + const blockProps = useBlockProps.save( { + className: classNames( { 'fr-tabs__panel--selected': index === 0, - }), + } ), role: `tabpanel`, tabindex: 0, - }); + } ); - setDSFRBlockClassName(blockProps, 'fr-tabs-panel', 'fr-tabs__panel'); + setDSFRBlockClassName( blockProps, 'fr-tabs-panel', 'fr-tabs__panel' ); return ( -
            -
            +
            +
            ); } diff --git a/wp-dsfr-blocks/src/fr-tabs/TabsFocus.js b/wp-dsfr-blocks/src/fr-tabs/TabsFocus.js index fa42908..75851b8 100644 --- a/wp-dsfr-blocks/src/fr-tabs/TabsFocus.js +++ b/wp-dsfr-blocks/src/fr-tabs/TabsFocus.js @@ -1,23 +1,23 @@ import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -const TabsFocus = ({ activeTabIndex, setAttributes }) => { - if (activeTabIndex > -1) { - setAttributes({ activeTabIndex }); +const TabsFocus = ( { activeTabIndex, setAttributes } ) => { + if ( activeTabIndex > -1 ) { + setAttributes( { activeTabIndex } ); } }; -export default compose([ - withSelect((select, ownProps) => { +export default compose( [ + withSelect( ( select, ownProps ) => { const { getBlockName, getBlockIndex, getSelectedBlockClientId, getBlockParentsByBlockName, hasSelectedInnerBlock, - } = select('core/block-editor'); + } = select( 'core/block-editor' ); - if (!hasSelectedInnerBlock(ownProps.clientId, true)) { + if ( ! hasSelectedInnerBlock( ownProps.clientId, true ) ) { return { activeTabIndex: -1, setAttributes: ownProps.setAttributes, @@ -27,21 +27,21 @@ export default compose([ let selected = getSelectedBlockClientId(); if ( - !['dsfr/fr-tabs-panel', 'dsfr/fr-tabs-list-item'].includes( - getBlockName(selected) + ! [ 'dsfr/fr-tabs-panel', 'dsfr/fr-tabs-list-item' ].includes( + getBlockName( selected ) ) ) { - selected = getBlockParentsByBlockName(selected, [ + selected = getBlockParentsByBlockName( selected, [ 'dsfr/fr-tabs-list-item', 'dsfr/fr-tabs-panel', - ])[0]; + ] )[ 0 ]; } return { activeTabIndex: - getBlockIndex(selected) - - ('dsfr/fr-tabs-panel' === getBlockName(selected) ? 1 : 0), + getBlockIndex( selected ) - + ( 'dsfr/fr-tabs-panel' === getBlockName( selected ) ? 1 : 0 ), setAttributes: ownProps.setAttributes, }; - }), -])(TabsFocus); + } ), +] )( TabsFocus ); diff --git a/wp-dsfr-blocks/src/fr-tabs/block.json b/wp-dsfr-blocks/src/fr-tabs/block.json index 6c880d1..b8defde 100644 --- a/wp-dsfr-blocks/src/fr-tabs/block.json +++ b/wp-dsfr-blocks/src/fr-tabs/block.json @@ -10,7 +10,7 @@ "supports": { "html": false, "anchor": true, - "align": ["wide", "full"] + "align": [ "wide", "full" ] }, "attributes": { "id": { diff --git a/wp-dsfr-blocks/src/fr-tabs/edit.js b/wp-dsfr-blocks/src/fr-tabs/edit.js index 6cf0caf..2508cda 100644 --- a/wp-dsfr-blocks/src/fr-tabs/edit.js +++ b/wp-dsfr-blocks/src/fr-tabs/edit.js @@ -13,50 +13,50 @@ import uniqid from '../common/js/utils/uniqid'; import './editor.scss'; -export default function Edit({ +export default function Edit( { attributes: { title }, setAttributes, clientId, -}) { +} ) { const blockProps = useBlockProps(); - const innerBlocksProps = useInnerBlocksProps(blockProps, { + const innerBlocksProps = useInnerBlocksProps( blockProps, { directInsert: false, - allowedBlocks: ['dsfr/fr-tabs-list', 'dsfr/fr-tabs-panel'], + allowedBlocks: [ 'dsfr/fr-tabs-list', 'dsfr/fr-tabs-panel' ], template: [ - ['dsfr/fr-tabs-list'], - ...new Array(3).fill(['dsfr/fr-tabs-panel']), + [ 'dsfr/fr-tabs-list' ], + ...new Array( 3 ).fill( [ 'dsfr/fr-tabs-panel' ] ), ], templateInsertUpdatesSelection: true, renderAppender: false, - }); + } ); - useEffect(() => { - setAttributes({ id: uniqid('fr-tabs') }); - }, []); // eslint-disable-line react-hooks/exhaustive-deps + useEffect( () => { + setAttributes( { id: uniqid( 'fr-tabs' ) } ); + }, [] ); // eslint-disable-line react-hooks/exhaustive-deps - setDSFRBlockClassName(innerBlocksProps, 'fr-tabs'); + setDSFRBlockClassName( innerBlocksProps, 'fr-tabs' ); return ( <> { - setAttributes({ title: content }); - }} + value={ title } + label={ __( 'Title' ) } + onChange={ ( content ) => { + setAttributes( { title: content } ); + } } /> - -
            + +
            ); } diff --git a/wp-dsfr-blocks/src/fr-tabs/index.js b/wp-dsfr-blocks/src/fr-tabs/index.js index 8c39e8a..5d9d691 100644 --- a/wp-dsfr-blocks/src/fr-tabs/index.js +++ b/wp-dsfr-blocks/src/fr-tabs/index.js @@ -6,8 +6,8 @@ import edit from './edit'; import save from './save'; import metadata from './block.json'; -registerBlockType(metadata.name, { - icon: , +registerBlockType( metadata.name, { + icon: , edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-tabs/save.js b/wp-dsfr-blocks/src/fr-tabs/save.js index 8e81bec..4537658 100644 --- a/wp-dsfr-blocks/src/fr-tabs/save.js +++ b/wp-dsfr-blocks/src/fr-tabs/save.js @@ -1,17 +1,17 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function save({ attributes }) { +export default function save( { attributes } ) { const { title, tabsListPosition } = attributes; const blockProps = useBlockProps.save(); - const innerBlocksProps = useInnerBlocksProps.save(blockProps); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); - setDSFRBlockClassName(innerBlocksProps, 'fr-tabs'); + setDSFRBlockClassName( innerBlocksProps, 'fr-tabs' ); - if (tabsListPosition) { + if ( tabsListPosition ) { innerBlocksProps.className += ' has-tabs-list-aligned-' + tabsListPosition; } - return
            ; + return
            ; } diff --git a/wp-dsfr-blocks/src/fr-tile/edit.js b/wp-dsfr-blocks/src/fr-tile/edit.js index a4e29e7..ce80f41 100644 --- a/wp-dsfr-blocks/src/fr-tile/edit.js +++ b/wp-dsfr-blocks/src/fr-tile/edit.js @@ -27,342 +27,357 @@ import getSurtitleClasses from './getSurtitleClasses'; import './editor.scss'; -export default function Edit({ attributes, setAttributes, isSelected }) { - const [popoverAnchor, setPopoverAnchor] = useState(null); - const [isEditingURL, setIsEditingURL] = useState(false); - const isURLSet = !!attributes.linkURL; +export default function Edit( { attributes, setAttributes, isSelected } ) { + const [ popoverAnchor, setPopoverAnchor ] = useState( null ); + const [ isEditingURL, setIsEditingURL ] = useState( false ); + const isURLSet = !! attributes.linkURL; const ref = useRef(); - const blockProps = useBlockProps({ - className: classNames({ + const blockProps = useBlockProps( { + className: classNames( { 'fr-tile--horizontal': attributes.isHorizontal, - 'fr-tile--no-icon': !attributes.displayIcon, - 'fr-tile--no-border': !attributes.displayBorder, + 'fr-tile--no-icon': ! attributes.displayIcon, + 'fr-tile--no-border': ! attributes.displayBorder, 'fr-tile--shadow': attributes.displayShadow, - ['fr-tile--' + attributes.background]: !!attributes.background, + [ 'fr-tile--' + attributes.background ]: !! attributes.background, 'fr-enlarge-link': attributes.title && attributes.linkURL, - }), - ref: useMergeRefs([setPopoverAnchor, ref]), - }); + } ), + ref: useMergeRefs( [ setPopoverAnchor, ref ] ), + } ); const linkValue = useMemo( - () => ({ + () => ( { url: attributes.linkURL, opensInNewTab: attributes.target === '_blank', title: attributes.linkTitle, - }), - [attributes.linkURL, attributes.linkTarget, attributes.linkTitle] + } ), + [ attributes.linkURL, attributes.linkTarget, attributes.linkTitle ] ); /** * Update attributes imageId, imageURL, imageAlt (see block.json) */ - function onSelectMedia(media) { - if (media.mime === 'image/svg+xml') { - fetch(media.url) - .then((response) => response.text()) - .then((svg) => { - setAttributes({ + function onSelectMedia( media ) { + if ( media.mime === 'image/svg+xml' ) { + fetch( media.url ) + .then( ( response ) => response.text() ) + .then( ( svg ) => { + setAttributes( { imageURL: '', imageAlt: '', imageSvg: svg, - }); - }); + } ); + } ); } - setAttributes({ + setAttributes( { imageId: media.id, imageURL: media?.sizes?.thumbnail?.url ? media.sizes.thumbnail.url : media.url, imageAlt: media.alt, - }); + } ); } /** * Reset attributes imageId, imageURL, imageAlt (see block.json) */ function removeMedia() { - setAttributes({ + setAttributes( { imageId: 0, imageURL: '', imageAlt: '', imageSvg: '', - }); + } ); } /** * When user start editing link */ - function startEditingURL(e) { + function startEditingURL( e ) { e.preventDefault(); - setIsEditingURL(true); + setIsEditingURL( true ); } /** * Reset link attributes */ function unlink() { - setAttributes({ + setAttributes( { url: '', linkTarget: '', - }); - setIsEditingURL(false); + } ); + setIsEditingURL( false ); } - useEffect(() => { - if (!isSelected) { - setIsEditingURL(false); + useEffect( () => { + if ( ! isSelected ) { + setIsEditingURL( false ); } - }, [isSelected]); + }, [ isSelected ] ); - setDSFRBlockClassName(blockProps, 'fr-tile'); + setDSFRBlockClassName( blockProps, 'fr-tile' ); return ( <> - setAttributes({ isHorizontal }) + label={ __( + 'Afficher horizontalement', + 'wp-dsfr-blocks' + ) } + checked={ attributes.isHorizontal } + onChange={ ( isHorizontal ) => + setAttributes( { isHorizontal } ) } /> - setAttributes({ displayIcon }) + label={ __( + "Afficher l'icône du lien", + 'wp-dsfr-blocks' + ) } + checked={ attributes.displayIcon } + onChange={ ( displayIcon ) => + setAttributes( { displayIcon } ) } /> { + label={ __( "Afficher l'image", 'wp-dsfr-blocks' ) } + checked={ attributes.displayImage } + onChange={ ( displayImage ) => { removeMedia(); - setAttributes({ displayImage }); - }} + setAttributes( { displayImage } ); + } } /> - setAttributes({ + label={ __( + 'Afficher les bordures', + 'wp-dsfr-blocks' + ) } + checked={ attributes.displayBorder } + onChange={ ( displayBorder ) => + setAttributes( { displayShadow: displayBorder ? false : attributes.displayShadow, displayBorder, - }) + } ) } /> - setAttributes({ + label={ __( "Afficher l'ombre", 'wp-dsfr-blocks' ) } + checked={ attributes.displayShadow } + onChange={ ( displayShadow ) => + setAttributes( { displayBorder: displayShadow ? false : attributes.displayBorder, displayShadow, - }) + } ) } /> setAttributes({ background })} + ] } + onChange={ ( background ) => + setAttributes( { background } ) + } /> { - if (!surtitleType) { - setAttributes({ surtitleText: '' }); + ] } + onChange={ ( surtitleType ) => { + if ( ! surtitleType ) { + setAttributes( { surtitleText: '' } ); } - setAttributes({ surtitleType }); - }} + setAttributes( { surtitleType } ); + } } /> - {attributes.surtitleType === 'badge' && ( + { attributes.surtitleType === 'badge' && ( - setAttributes({ badgeColor }) + label={ __( 'Couleur du badge', 'wp-dsfr-blocks' ) } + value={ attributes.badgeColor } + onChange={ ( badgeColor ) => + setAttributes( { badgeColor } ) } /> - )} + ) } - {!isURLSet && ( + { ! isURLSet && ( - )} - {isURLSet && ( + ) } + { isURLSet && ( - )} + ) } - {isSelected && (isEditingURL || isURLSet) && ( + { isSelected && ( isEditingURL || isURLSet ) && ( { - setIsEditingURL(false); - }} - anchor={popoverAnchor} - focusOnMount={isEditingURL ? 'firstElement' : false} + onClose={ () => { + setIsEditingURL( false ); + } } + anchor={ popoverAnchor } + focusOnMount={ isEditingURL ? 'firstElement' : false } __unstableSlotName="__unstable-block-tools-after" shift > { - setAttributes({ + value={ linkValue } + onChange={ ( value ) => { + setAttributes( { linkURL: value.url, linkTarget: value.opensInNewTab ? '_blank' : '_self', - }); - }} - onRemove={unlink} - forceIsEditingLink={isEditingURL} + } ); + } } + onRemove={ unlink } + forceIsEditingLink={ isEditingURL } /> - )} -
            + ) } +

            - {isURLSet ? ( + { isURLSet ? ( e.preventDefault()} + href={ attributes.linkURL } + onClick={ ( e ) => e.preventDefault() } rel="noopener" > - setAttributes({ title }) + ) } + value={ attributes.title } + onChange={ ( title ) => + setAttributes( { title } ) } - allowedFormats={[]} + allowedFormats={ [] } /> ) : ( - setAttributes({ title }) + ) } + value={ attributes.title } + onChange={ ( title ) => + setAttributes( { title } ) } - allowedFormats={[]} + allowedFormats={ [] } /> - )} + ) }

            - setAttributes({ description }) + ) } + value={ attributes.description } + onChange={ ( description ) => + setAttributes( { description } ) } - allowedFormats={[]} + allowedFormats={ [] } /> setAttributes({ detail })} - allowedFormats={[]} + ) } + value={ attributes.detail } + onChange={ ( detail ) => + setAttributes( { detail } ) + } + allowedFormats={ [] } /> - {attributes.surtitleType && ( + { attributes.surtitleType && (
            - setAttributes({ surtitleText }) + ) } + value={ attributes.surtitleText } + onChange={ ( surtitleText ) => + setAttributes( { surtitleText } ) } - allowedFormats={[]} + allowedFormats={ [] } />
            - )} + ) }
            - {attributes.displayImage && ( + { attributes.displayImage && (
            ( -
            - )} + ) }
            ); diff --git a/wp-dsfr-blocks/src/fr-tile/getSurtitleClasses.js b/wp-dsfr-blocks/src/fr-tile/getSurtitleClasses.js index 6226524..326ed2f 100644 --- a/wp-dsfr-blocks/src/fr-tile/getSurtitleClasses.js +++ b/wp-dsfr-blocks/src/fr-tile/getSurtitleClasses.js @@ -1,10 +1,10 @@ -export default function (attributes) { +export default function ( attributes ) { const type = attributes.surtitleType; const color = attributes.badgeColor; return type ? 'fr-' + type + - (type === 'badge' && color ? ' fr-badge--' + color : '') + ( type === 'badge' && color ? ' fr-badge--' + color : '' ) : ''; } diff --git a/wp-dsfr-blocks/src/fr-tile/index.js b/wp-dsfr-blocks/src/fr-tile/index.js index 2ba8b9d..6ecdfe0 100644 --- a/wp-dsfr-blocks/src/fr-tile/index.js +++ b/wp-dsfr-blocks/src/fr-tile/index.js @@ -4,8 +4,8 @@ import save from './save'; import metadata from './block.json'; import DSFRIcons from '../common/js/components/DSFRIcons'; -registerBlockType(metadata.name, { +registerBlockType( metadata.name, { icon: DSFRIcons.tile, edit: Edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-tile/save.js b/wp-dsfr-blocks/src/fr-tile/save.js index 4b038bc..c08dcd9 100644 --- a/wp-dsfr-blocks/src/fr-tile/save.js +++ b/wp-dsfr-blocks/src/fr-tile/save.js @@ -5,84 +5,84 @@ import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; import getSurtitleClasses from './getSurtitleClasses'; -export default function save({ attributes }) { - const blockProps = useBlockProps.save({ - className: classNames({ +export default function save( { attributes } ) { + const blockProps = useBlockProps.save( { + className: classNames( { 'fr-tile--horizontal': attributes.isHorizontal, - 'fr-tile--no-icon': !attributes.displayIcon, - 'fr-tile--no-border': !attributes.displayBorder, + 'fr-tile--no-icon': ! attributes.displayIcon, + 'fr-tile--no-border': ! attributes.displayBorder, 'fr-tile--shadow': attributes.displayShadow, - ['fr-tile--' + attributes.background]: !!attributes.background, + [ 'fr-tile--' + attributes.background ]: !! attributes.background, 'fr-enlarge-link': attributes.title && attributes.linkURL, - }), - }); + } ), + } ); - setDSFRBlockClassName(blockProps, 'fr-tile'); + setDSFRBlockClassName( blockProps, 'fr-tile' ); return ( -
            +
            - {attributes.title ? ( + { attributes.title ? (

            - {attributes.linkURL ? ( + { attributes.linkURL ? ( - {attributes.title} + { attributes.title } ) : ( attributes.title - )} + ) }

            ) : ( '' - )} + ) } - {attributes.surtitleType && attributes.surtitleText ? ( + { attributes.surtitleType && attributes.surtitleText ? (
            ) : ( '' - )} + ) }
            - {attributes.displayImage && attributes.imageId ? ( + { attributes.displayImage && attributes.imageId ? (
            - {attributes.imageURL ? ( + { attributes.imageURL ? ( {attributes.imageAlt} ) : ( - - )} + + ) }
            ) : ( '' - )} + ) }
            ); } diff --git a/wp-dsfr-blocks/src/fr-tiles-group/block.json b/wp-dsfr-blocks/src/fr-tiles-group/block.json index 5dc92c1..d53095d 100644 --- a/wp-dsfr-blocks/src/fr-tiles-group/block.json +++ b/wp-dsfr-blocks/src/fr-tiles-group/block.json @@ -8,7 +8,7 @@ "description": "Bloc DSFR grille de tuiles.", "supports": { "html": false, - "align": ["wide", "full"], + "align": [ "wide", "full" ], "color": { "background": false, "text": false diff --git a/wp-dsfr-blocks/src/fr-tiles-group/edit.js b/wp-dsfr-blocks/src/fr-tiles-group/edit.js index 7a65ac7..9d15e14 100644 --- a/wp-dsfr-blocks/src/fr-tiles-group/edit.js +++ b/wp-dsfr-blocks/src/fr-tiles-group/edit.js @@ -9,17 +9,17 @@ import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; import './editor.scss'; -export default function Edit({ attributes, setAttributes }) { +export default function Edit( { attributes, setAttributes } ) { const blockProps = useBlockProps(); const innerBlocksProps = { - ...useInnerBlocksProps(blockProps, { - allowedBlocks: ['dsfr/fr-tile'], - template: new Array(3).fill(['dsfr/fr-tile']), + ...useInnerBlocksProps( blockProps, { + allowedBlocks: [ 'dsfr/fr-tile' ], + template: new Array( 3 ).fill( [ 'dsfr/fr-tile' ] ), templateInsertUpdatesSelection: true, - }), + } ), }; - const tilesByLine = Math.ceil(attributes.tilesByLine / 5); - const tilesByLineSM = Math.ceil(attributes.tilesByLine / 2); + const tilesByLine = Math.ceil( attributes.tilesByLine / 5 ); + const tilesByLineSM = Math.ceil( attributes.tilesByLine / 2 ); const tilesByLineMD = attributes.tilesByLine; const style = { '--tiles-by-line': tilesByLine, @@ -27,38 +27,38 @@ export default function Edit({ attributes, setAttributes }) { '--tiles-by-line-md': tilesByLineMD, }; - setDSFRBlockClassName(innerBlocksProps, 'fr-tiles-group'); + setDSFRBlockClassName( innerBlocksProps, 'fr-tiles-group' ); return ( <> - setAttributes({ tilesByLine }) + label={ __( 'Tuiles par ligne', 'wp-dsfr-blocks' ) } + value={ attributes.tilesByLine } + onChange={ ( tilesByLine ) => + setAttributes( { tilesByLine } ) } - min={1} - max={6} - help={sprintf( + min={ 1 } + max={ 6 } + help={ sprintf( __( '%d colonnes(s) pour les ordinateurs de bureau, %d pour les tablettes et %s pour les mobiles' ), tilesByLineMD, tilesByLineSM, tilesByLine - )} + ) } /> -
            +
            ); } diff --git a/wp-dsfr-blocks/src/fr-tiles-group/editor.scss b/wp-dsfr-blocks/src/fr-tiles-group/editor.scss index f03fc79..78adb03 100644 --- a/wp-dsfr-blocks/src/fr-tiles-group/editor.scss +++ b/wp-dsfr-blocks/src/fr-tiles-group/editor.scss @@ -1,2 +1,2 @@ /* editor */ -@import './style.scss'; +@use './style.scss'; diff --git a/wp-dsfr-blocks/src/fr-tiles-group/index.js b/wp-dsfr-blocks/src/fr-tiles-group/index.js index 3cf58bf..b2b5007 100644 --- a/wp-dsfr-blocks/src/fr-tiles-group/index.js +++ b/wp-dsfr-blocks/src/fr-tiles-group/index.js @@ -5,8 +5,8 @@ import metadata from './block.json'; import './style.scss'; import DSFRIcons from '../common/js/components/DSFRIcons'; -registerBlockType(metadata.name, { +registerBlockType( metadata.name, { icon: DSFRIcons.tilesGroup, edit: Edit, save, -}); +} ); diff --git a/wp-dsfr-blocks/src/fr-tiles-group/save.js b/wp-dsfr-blocks/src/fr-tiles-group/save.js index c263100..0669770 100644 --- a/wp-dsfr-blocks/src/fr-tiles-group/save.js +++ b/wp-dsfr-blocks/src/fr-tiles-group/save.js @@ -1,11 +1,11 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import setDSFRBlockClassName from '../common/js/utils/setDSFRBlockClassName'; -export default function save({ attributes }) { +export default function save( { attributes } ) { const blockProps = useBlockProps.save(); - const innerBlocksProps = useInnerBlocksProps.save(blockProps); - const tilesByLine = Math.ceil(attributes.tilesByLine / 5); - const tilesByLineSM = Math.ceil(attributes.tilesByLine / 2); + const innerBlocksProps = useInnerBlocksProps.save( blockProps ); + const tilesByLine = Math.ceil( attributes.tilesByLine / 5 ); + const tilesByLineSM = Math.ceil( attributes.tilesByLine / 2 ); const tilesByLineMD = attributes.tilesByLine; // css var must be casted to string to prevent px unit addition // https://github.com/WordPress/gutenberg/issues/36568 @@ -15,7 +15,7 @@ export default function save({ attributes }) { '--tiles-by-line-md': '' + tilesByLineMD, }; - setDSFRBlockClassName(innerBlocksProps, 'fr-tiles-group'); + setDSFRBlockClassName( innerBlocksProps, 'fr-tiles-group' ); - return
            ; + return
            ; } diff --git a/wp-dsfr-theme/.version-data.json b/wp-dsfr-theme/.version-data.json index d948058..af558a8 100644 --- a/wp-dsfr-theme/.version-data.json +++ b/wp-dsfr-theme/.version-data.json @@ -1,3 +1,3 @@ { - "version": "2025.1.2" + "version": "2026.0.0" } \ No newline at end of file diff --git a/wp-dsfr-theme/config/loaders.js b/wp-dsfr-theme/config/loaders.js index 80ba503..6a306e4 100644 --- a/wp-dsfr-theme/config/loaders.js +++ b/wp-dsfr-theme/config/loaders.js @@ -83,6 +83,7 @@ module.exports = { sassOptions: function (loaderContext) { let obj = { quietDeps: true, + silenceDeprecations: ['legacy-js-api'], sourceMap: true, } diff --git a/wp-dsfr-theme/inc/Helpers/DSFR.php b/wp-dsfr-theme/inc/Helpers/DSFR.php index 5b462cc..cba9dd6 100644 --- a/wp-dsfr-theme/inc/Helpers/DSFR.php +++ b/wp-dsfr-theme/inc/Helpers/DSFR.php @@ -49,3 +49,1109 @@ function get_dsfr_colors_with_label( string $prefix = '' ): array { function get_dsfr_colors( string $prefix = '' ): array { return array_keys( get_dsfr_colors_with_label( $prefix ) ); } + +/** + * Get DSFR icon classes grouped by category. + * + * @return array + */ +function get_dsfr_icons_by_category(): array { + return [ + 'Arrows' => [ + 'fr-icon-arrow-down-circle-fill', + 'fr-icon-arrow-down-circle-line', + 'fr-icon-arrow-down-fill', + 'fr-icon-arrow-down-line', + 'fr-icon-arrow-down-s-fill', + 'fr-icon-arrow-down-s-line', + 'fr-icon-arrow-go-back-fill', + 'fr-icon-arrow-go-back-line', + 'fr-icon-arrow-go-forward-fill', + 'fr-icon-arrow-go-forward-line', + 'fr-icon-arrow-left-circle-fill', + 'fr-icon-arrow-left-circle-line', + 'fr-icon-arrow-left-down-fill', + 'fr-icon-arrow-left-down-line', + 'fr-icon-arrow-left-fill', + 'fr-icon-arrow-left-line', + 'fr-icon-arrow-left-right-fill', + 'fr-icon-arrow-left-right-line', + 'fr-icon-arrow-left-s-fill', + 'fr-icon-arrow-left-s-first-line', + 'fr-icon-arrow-left-s-line', + 'fr-icon-arrow-left-s-line-double', + 'fr-icon-arrow-left-up-fill', + 'fr-icon-arrow-left-up-line', + 'fr-icon-arrow-right-circle-fill', + 'fr-icon-arrow-right-circle-line', + 'fr-icon-arrow-right-down-fill', + 'fr-icon-arrow-right-down-line', + 'fr-icon-arrow-right-fill', + 'fr-icon-arrow-right-line', + 'fr-icon-arrow-right-s-fill', + 'fr-icon-arrow-right-s-last-line', + 'fr-icon-arrow-right-s-line', + 'fr-icon-arrow-right-s-line-double', + 'fr-icon-arrow-right-up-fill', + 'fr-icon-arrow-right-up-line', + 'fr-icon-arrow-turn-back-fill', + 'fr-icon-arrow-turn-back-line', + 'fr-icon-arrow-turn-forward-fill', + 'fr-icon-arrow-turn-forward-line', + 'fr-icon-arrow-up-circle-fill', + 'fr-icon-arrow-up-circle-line', + 'fr-icon-arrow-up-down-fill', + 'fr-icon-arrow-up-down-line', + 'fr-icon-arrow-up-fill', + 'fr-icon-arrow-up-line', + 'fr-icon-arrow-up-s-fill', + 'fr-icon-arrow-up-s-line', + 'fr-icon-contract-left-fill', + 'fr-icon-contract-left-line', + 'fr-icon-contract-left-right-fill', + 'fr-icon-contract-left-right-line', + 'fr-icon-contract-right-fill', + 'fr-icon-contract-right-line', + 'fr-icon-contract-up-down-fill', + 'fr-icon-contract-up-down-line', + 'fr-icon-corner-down-left-fill', + 'fr-icon-corner-down-left-line', + 'fr-icon-corner-down-right-fill', + 'fr-icon-corner-down-right-line', + 'fr-icon-corner-left-down-fill', + 'fr-icon-corner-left-down-line', + 'fr-icon-corner-left-up-fill', + 'fr-icon-corner-left-up-line', + 'fr-icon-corner-right-down-fill', + 'fr-icon-corner-right-down-line', + 'fr-icon-corner-right-up-fill', + 'fr-icon-corner-right-up-line', + 'fr-icon-corner-up-left-fill', + 'fr-icon-corner-up-left-line', + 'fr-icon-corner-up-right-fill', + 'fr-icon-corner-up-right-line', + 'fr-icon-expand-left-fill', + 'fr-icon-expand-left-line', + 'fr-icon-expand-left-right-fill', + 'fr-icon-expand-left-right-line', + 'fr-icon-expand-right-fill', + 'fr-icon-expand-right-line', + 'fr-icon-expand-up-down-fill', + 'fr-icon-expand-up-down-line', + 'fr-icon-skip-down-fill', + 'fr-icon-skip-down-line', + 'fr-icon-skip-up-fill', + 'fr-icon-skip-up-line', + ], + + 'Building' => [ + 'fr-icon-ancient-gate-fill', + 'fr-icon-ancient-gate-line', + 'fr-icon-ancient-pavilion-fill', + 'fr-icon-ancient-pavilion-line', + 'fr-icon-bank-fill', + 'fr-icon-bank-line', + 'fr-icon-building-4-fill', + 'fr-icon-building-4-line', + 'fr-icon-building-fill', + 'fr-icon-building-line', + 'fr-icon-community-fill', + 'fr-icon-community-line', + 'fr-icon-government-fill', + 'fr-icon-government-line', + 'fr-icon-home-4-fill', + 'fr-icon-home-4-line', + 'fr-icon-home-office-fill', + 'fr-icon-home-office-line', + 'fr-icon-hospital-fill', + 'fr-icon-hospital-line', + 'fr-icon-hotel-fill', + 'fr-icon-hotel-line', + 'fr-icon-school-fill', + 'fr-icon-school-line', + 'fr-icon-store-fill', + 'fr-icon-store-line', + 'fr-icon-tent-fill', + 'fr-icon-tent-line', + ], + + 'Business' => [ + 'fr-icon-archive-drawer-fill', + 'fr-icon-archive-drawer-line', + 'fr-icon-archive-fill', + 'fr-icon-archive-line', + 'fr-icon-at-fill', + 'fr-icon-at-line', + 'fr-icon-attachment-fill', + 'fr-icon-attachment-line', + 'fr-icon-award-fill', + 'fr-icon-award-line', + 'fr-icon-bar-chart-2-fill', + 'fr-icon-bar-chart-2-line', + 'fr-icon-bar-chart-box-fill', + 'fr-icon-bar-chart-box-line', + 'fr-icon-bar-chart-fill', + 'fr-icon-bar-chart-horizontal-fill', + 'fr-icon-bar-chart-horizontal-line', + 'fr-icon-bar-chart-line', + 'fr-icon-bookmark-fill', + 'fr-icon-bookmark-line', + 'fr-icon-briefcase-fill', + 'fr-icon-briefcase-line', + 'fr-icon-bubble-chart-fill', + 'fr-icon-bubble-chart-line', + 'fr-icon-calculator-fill', + 'fr-icon-calculator-line', + 'fr-icon-calendar-2-fill', + 'fr-icon-calendar-2-line', + 'fr-icon-calendar-check-fill', + 'fr-icon-calendar-check-line', + 'fr-icon-calendar-close-fill', + 'fr-icon-calendar-close-line', + 'fr-icon-calendar-event-fill', + 'fr-icon-calendar-event-line', + 'fr-icon-calendar-fill', + 'fr-icon-calendar-line', + 'fr-icon-calendar-todo-fill', + 'fr-icon-calendar-todo-line', + 'fr-icon-cloud-fill', + 'fr-icon-cloud-line', + 'fr-icon-cloud-off-fill', + 'fr-icon-cloud-off-line', + 'fr-icon-copyright-fill', + 'fr-icon-copyright-line', + 'fr-icon-customer-service-fill', + 'fr-icon-customer-service-line', + 'fr-icon-donut-chart-fill', + 'fr-icon-donut-chart-line', + 'fr-icon-flag-fill', + 'fr-icon-flag-line', + 'fr-icon-global-fill', + 'fr-icon-global-line', + 'fr-icon-honour-fill', + 'fr-icon-honour-line', + 'fr-icon-inbox-2-fill', + 'fr-icon-inbox-2-line', + 'fr-icon-inbox-archive-fill', + 'fr-icon-inbox-archive-line', + 'fr-icon-inbox-fill', + 'fr-icon-inbox-line', + 'fr-icon-inbox-unarchive-fill', + 'fr-icon-inbox-unarchive-line', + 'fr-icon-line-chart-fill', + 'fr-icon-line-chart-line', + 'fr-icon-links-fill', + 'fr-icon-links-line', + 'fr-icon-mail-add-fill', + 'fr-icon-mail-add-line', + 'fr-icon-mail-check-fill', + 'fr-icon-mail-check-line', + 'fr-icon-mail-close-fill', + 'fr-icon-mail-close-line', + 'fr-icon-mail-download-fill', + 'fr-icon-mail-download-line', + 'fr-icon-mail-fill', + 'fr-icon-mail-forbid-fill', + 'fr-icon-mail-forbid-line', + 'fr-icon-mail-line', + 'fr-icon-mail-lock-fill', + 'fr-icon-mail-lock-line', + 'fr-icon-mail-open-fill', + 'fr-icon-mail-open-line', + 'fr-icon-mail-send-fill', + 'fr-icon-mail-send-line', + 'fr-icon-mail-settings-fill', + 'fr-icon-mail-settings-line', + 'fr-icon-mail-star-fill', + 'fr-icon-mail-star-line', + 'fr-icon-mail-unread-fill', + 'fr-icon-mail-unread-line', + 'fr-icon-mail-volume-fill', + 'fr-icon-mail-volume-line', + 'fr-icon-medal-fill', + 'fr-icon-medal-line', + 'fr-icon-megaphone-fill', + 'fr-icon-megaphone-line', + 'fr-icon-pass-expired-fill', + 'fr-icon-pass-expired-line', + 'fr-icon-pass-pending-fill', + 'fr-icon-pass-pending-line', + 'fr-icon-pass-valid-fill', + 'fr-icon-pass-valid-line', + 'fr-icon-pie-chart-2-fill', + 'fr-icon-pie-chart-2-line', + 'fr-icon-pie-chart-box-fill', + 'fr-icon-pie-chart-box-line', + 'fr-icon-pie-chart-fill', + 'fr-icon-pie-chart-line', + 'fr-icon-presentation-fill', + 'fr-icon-presentation-line', + 'fr-icon-printer-cloud-fill', + 'fr-icon-printer-cloud-line', + 'fr-icon-printer-fill', + 'fr-icon-printer-line', + 'fr-icon-profil-fill', + 'fr-icon-profil-line', + 'fr-icon-projector-2-fill', + 'fr-icon-projector-2-line', + 'fr-icon-record-mail-fill', + 'fr-icon-record-mail-line', + 'fr-icon-reply-all-fill', + 'fr-icon-reply-all-line', + 'fr-icon-reply-fill', + 'fr-icon-reply-line', + 'fr-icon-send-plane-fill', + 'fr-icon-send-plane-line', + 'fr-icon-seo-fill', + 'fr-icon-seo-line', + 'fr-icon-service-fill', + 'fr-icon-service-line', + 'fr-icon-shake-hands-fill', + 'fr-icon-shake-hands-line', + 'fr-icon-slideshow-fill', + 'fr-icon-slideshow-line', + 'fr-icon-stack-fill', + 'fr-icon-stack-line', + 'fr-icon-window-2-fill', + 'fr-icon-window-2-line', + 'fr-icon-window-fill', + 'fr-icon-window-line', + ], + + 'Communication' => [ + 'fr-icon-chat-2-fill', + 'fr-icon-chat-2-line', + 'fr-icon-chat-3-fill', + 'fr-icon-chat-3-line', + 'fr-icon-chat-check-fill', + 'fr-icon-chat-check-line', + 'fr-icon-chat-delete-fill', + 'fr-icon-chat-delete-line', + 'fr-icon-chat-download-fill', + 'fr-icon-chat-download-line', + 'fr-icon-chat-follow-up-fill', + 'fr-icon-chat-follow-up-line', + 'fr-icon-chat-forward-fill', + 'fr-icon-chat-forward-line', + 'fr-icon-chat-history-fill', + 'fr-icon-chat-history-line', + 'fr-icon-chat-new-fill', + 'fr-icon-chat-new-line', + 'fr-icon-chat-off-fill', + 'fr-icon-chat-off-line', + 'fr-icon-chat-poll-fill', + 'fr-icon-chat-poll-line', + 'fr-icon-chat-private-fill', + 'fr-icon-chat-private-line', + 'fr-icon-chat-quote-fill', + 'fr-icon-chat-quote-line', + 'fr-icon-chat-settings-fill', + 'fr-icon-chat-settings-line', + 'fr-icon-chat-upload-fill', + 'fr-icon-chat-upload-line', + 'fr-icon-chat-voice-fill', + 'fr-icon-chat-voice-line', + 'fr-icon-discuss-fill', + 'fr-icon-discuss-line', + 'fr-icon-emoji-sticker-fill', + 'fr-icon-emoji-sticker-line', + 'fr-icon-feedback-fill', + 'fr-icon-feedback-line', + 'fr-icon-message-2-fill', + 'fr-icon-message-2-line', + 'fr-icon-message-3-fill', + 'fr-icon-message-3-line', + 'fr-icon-question-answer-fill', + 'fr-icon-question-answer-line', + 'fr-icon-questionnaire-fill', + 'fr-icon-questionnaire-line', + 'fr-icon-speak-fill', + 'fr-icon-speak-line', + 'fr-icon-video-chat-fill', + 'fr-icon-video-chat-line', + ], + + 'Design' => [ + 'fr-icon-anticlockwise-fill', + 'fr-icon-anticlockwise-line', + 'fr-icon-artboard-fill', + 'fr-icon-artboard-line', + 'fr-icon-ball-pen-fill', + 'fr-icon-ball-pen-line', + 'fr-icon-blur-off-fill', + 'fr-icon-blur-off-line', + 'fr-icon-brush-3-fill', + 'fr-icon-brush-3-line', + 'fr-icon-brush-fill', + 'fr-icon-brush-line', + 'fr-icon-circle-fill', + 'fr-icon-circle-line', + 'fr-icon-clockwise-fill', + 'fr-icon-clockwise-line', + 'fr-icon-collage-fill', + 'fr-icon-collage-line', + 'fr-icon-compasses-2-fill', + 'fr-icon-compasses-2-line', + 'fr-icon-contrast-drop-2-fill', + 'fr-icon-contrast-drop-2-line', + 'fr-icon-contrast-fill', + 'fr-icon-contrast-line', + 'fr-icon-crop-fill', + 'fr-icon-crop-line', + 'fr-icon-crosshair-2-fill', + 'fr-icon-crosshair-2-line', + 'fr-icon-drag-drop-fill', + 'fr-icon-drag-drop-line', + 'fr-icon-drag-move-2-fill', + 'fr-icon-drag-move-2-line', + 'fr-icon-drop-fill', + 'fr-icon-drop-line', + 'fr-icon-edit-box-fill', + 'fr-icon-edit-box-line', + 'fr-icon-edit-circle-fill', + 'fr-icon-edit-circle-line', + 'fr-icon-edit-fill', + 'fr-icon-edit-line', + 'fr-icon-eraser-fill', + 'fr-icon-eraser-fill-1', + 'fr-icon-eraser-line', + 'fr-icon-eraser-line-1', + 'fr-icon-focus-3-fill', + 'fr-icon-focus-3-line', + 'fr-icon-grid-fill', + 'fr-icon-grid-line', + 'fr-icon-hammer-fill', + 'fr-icon-hammer-line', + 'fr-icon-hexagon-fill', + 'fr-icon-hexagon-line', + 'fr-icon-ink-bottle-fill', + 'fr-icon-ink-bottle-line', + 'fr-icon-layout-bottom-fill', + 'fr-icon-layout-bottom-line', + 'fr-icon-layout-column-fill', + 'fr-icon-layout-column-line', + 'fr-icon-layout-fill', + 'fr-icon-layout-grid-fill', + 'fr-icon-layout-grid-line', + 'fr-icon-layout-left-fill', + 'fr-icon-layout-left-line', + 'fr-icon-layout-line', + 'fr-icon-layout-masonry-fill', + 'fr-icon-layout-masonry-line', + 'fr-icon-layout-right-fill', + 'fr-icon-layout-right-line', + 'fr-icon-layout-row-fill', + 'fr-icon-layout-row-line', + 'fr-icon-layout-top-fill', + 'fr-icon-layout-top-line', + 'fr-icon-magic-fill', + 'fr-icon-magic-line', + 'fr-icon-mark-pen-fill', + 'fr-icon-mark-pen-line', + 'fr-icon-markup-fill', + 'fr-icon-markup-line', + 'fr-icon-octagon-fill', + 'fr-icon-octagon-line', + 'fr-icon-paint-brush-fill', + 'fr-icon-paint-brush-line', + 'fr-icon-paint-fill', + 'fr-icon-paint-line', + 'fr-icon-palette-fill', + 'fr-icon-palette-line', + 'fr-icon-pantone-fill', + 'fr-icon-pantone-line', + 'fr-icon-pen-nib-fill', + 'fr-icon-pen-nib-line', + 'fr-icon-pencil-fill', + 'fr-icon-pencil-line', + 'fr-icon-pencil-ruler-fill', + 'fr-icon-pencil-ruler-line', + 'fr-icon-pentagon-fill', + 'fr-icon-pentagon-line', + 'fr-icon-quill-pen-fill', + 'fr-icon-quill-pen-line', + 'fr-icon-rectangle-fill', + 'fr-icon-rectangle-line', + 'fr-icon-ruler-fill', + 'fr-icon-ruler-line', + 'fr-icon-scissors-cut-fill', + 'fr-icon-scissors-cut-line', + 'fr-icon-scissors-fill', + 'fr-icon-scissors-line', + 'fr-icon-screenshot-2-fill', + 'fr-icon-screenshot-2-line', + 'fr-icon-shape-fill', + 'fr-icon-shape-line', + 'fr-icon-shapes-fill', + 'fr-icon-shapes-line', + 'fr-icon-sip-fill', + 'fr-icon-sip-line', + 'fr-icon-slice-fill', + 'fr-icon-slice-line', + 'fr-icon-square-fill', + 'fr-icon-square-line', + 'fr-icon-table-alt-fill', + 'fr-icon-table-alt-line', + 'fr-icon-table-fill', + 'fr-icon-table-line', + 'fr-icon-tools-fill', + 'fr-icon-tools-line', + 'fr-icon-triangle-fill', + 'fr-icon-triangle-line', + ], + + 'Development' => [ + 'fr-icon-braces-fill', + 'fr-icon-braces-line', + 'fr-icon-brackets-fill', + 'fr-icon-brackets-line', + 'fr-icon-bug-fill', + 'fr-icon-bug-line', + 'fr-icon-code-box-fill', + 'fr-icon-code-box-line', + 'fr-icon-code-fill', + 'fr-icon-code-line', + 'fr-icon-code-s-slash-fill', + 'fr-icon-code-s-slash-line', + 'fr-icon-command-fill', + 'fr-icon-command-line', + 'fr-icon-css3-fill', + 'fr-icon-css3-line', + 'fr-icon-cursor-fill', + 'fr-icon-cursor-line', + 'fr-icon-git-branch-fill', + 'fr-icon-git-branch-line', + 'fr-icon-git-close-pull-request-fill', + 'fr-icon-git-close-pull-request-line', + 'fr-icon-git-commit-fill', + 'fr-icon-git-commit-line', + 'fr-icon-git-merge-fill', + 'fr-icon-git-merge-line', + 'fr-icon-git-pull-request-fill', + 'fr-icon-git-pull-request-line', + 'fr-icon-git-repository-commits-fill', + 'fr-icon-git-repository-commits-line', + 'fr-icon-git-repository-fill', + 'fr-icon-git-repository-line', + 'fr-icon-git-repository-private-fill', + 'fr-icon-git-repository-private-line', + 'fr-icon-html5-fill', + 'fr-icon-html5-line', + 'fr-icon-javascript-fill', + 'fr-icon-javascript-line', + 'fr-icon-parentheses-fill', + 'fr-icon-parentheses-line', + 'fr-icon-terminal-box-fill', + 'fr-icon-terminal-box-line', + 'fr-icon-terminal-fill', + 'fr-icon-terminal-line', + 'fr-icon-terminal-window-fill', + 'fr-icon-terminal-window-line', + ], + + 'Device' => [ + 'fr-icon-airplay-fill', + 'fr-icon-airplay-line', + 'fr-icon-barcode-box-fill', + 'fr-icon-barcode-box-line', + 'fr-icon-barcode-fill', + 'fr-icon-barcode-line', + 'fr-icon-base-station-fill', + 'fr-icon-base-station-line', + 'fr-icon-battery-charge-fill', + 'fr-icon-battery-charge-line', + 'fr-icon-battery-fill', + 'fr-icon-battery-line', + 'fr-icon-battery-low-fill', + 'fr-icon-battery-low-line', + 'fr-icon-bluetooth-connect-fill', + 'fr-icon-bluetooth-connect-line', + 'fr-icon-bluetooth-fill', + 'fr-icon-bluetooth-line', + 'fr-icon-cast-fill', + 'fr-icon-cast-line', + 'fr-icon-cellphone-fill', + 'fr-icon-cellphone-line', + 'fr-icon-computer-fill', + 'fr-icon-computer-line', + 'fr-icon-cpu-fill', + 'fr-icon-cpu-line', + 'fr-icon-dashboard-3-fill', + 'fr-icon-dashboard-3-line', + 'fr-icon-database-fill', + 'fr-icon-database-line', + 'fr-icon-device-fill', + 'fr-icon-device-line', + 'fr-icon-device-recover-fill', + 'fr-icon-device-recover-line', + 'fr-icon-fingerprint-fill', + 'fr-icon-fingerprint-line', + 'fr-icon-gamepad-fill', + 'fr-icon-gamepad-line', + 'fr-icon-gps-fill', + 'fr-icon-gps-line', + 'fr-icon-gradienter-fill', + 'fr-icon-gradienter-line', + 'fr-icon-hard-drive-2-fill', + 'fr-icon-hard-drive-2-line', + 'fr-icon-hotspot-fill', + 'fr-icon-hotspot-line', + 'fr-icon-install-fill', + 'fr-icon-install-line', + 'fr-icon-instance-fill', + 'fr-icon-instance-line', + 'fr-icon-keyboard-fill', + 'fr-icon-keyboard-line', + 'fr-icon-mac-fill', + 'fr-icon-mac-line', + 'fr-icon-macbook-fill', + 'fr-icon-macbook-line', + 'fr-icon-mouse-fill', + 'fr-icon-mouse-line', + 'fr-icon-phone-fill', + 'fr-icon-phone-find-fill', + 'fr-icon-phone-find-line', + 'fr-icon-phone-line', + 'fr-icon-phone-lock-fill', + 'fr-icon-phone-lock-line', + 'fr-icon-qr-code-fill', + 'fr-icon-qr-code-line', + 'fr-icon-qr-scan-fill', + 'fr-icon-qr-scan-line', + 'fr-icon-radar-fill', + 'fr-icon-radar-line', + 'fr-icon-remote-control-2-fill', + 'fr-icon-remote-control-2-line', + 'fr-icon-remote-control-fill', + 'fr-icon-remote-control-line', + 'fr-icon-restart-fill', + 'fr-icon-restart-line', + 'fr-icon-rfid-fill', + 'fr-icon-rfid-line', + 'fr-icon-rotate-lock-fill', + 'fr-icon-rotate-lock-line', + 'fr-icon-router-fill', + 'fr-icon-router-line', + 'fr-icon-rss-fill', + 'fr-icon-rss-line', + 'fr-icon-save-3-fill', + 'fr-icon-save-3-line', + 'fr-icon-save-fill', + 'fr-icon-save-line', + 'fr-icon-scan-fill', + 'fr-icon-scan-line', + 'fr-icon-sd-card-fill', + 'fr-icon-sd-card-line', + 'fr-icon-sd-card-mini-fill', + 'fr-icon-sd-card-mini-line', + 'fr-icon-sensor-fill', + 'fr-icon-sensor-line', + 'fr-icon-server-fill', + 'fr-icon-server-line', + 'fr-icon-shut-down-fill', + 'fr-icon-shut-down-line', + 'fr-icon-signal-wifi-error-fill', + 'fr-icon-signal-wifi-error-line', + 'fr-icon-signal-wifi-fill', + 'fr-icon-signal-wifi-line', + 'fr-icon-signal-wifi-off-fill', + 'fr-icon-signal-wifi-off-line', + 'fr-icon-sim-card-2-fill', + 'fr-icon-sim-card-2-line', + 'fr-icon-smartphone-fill', + 'fr-icon-smartphone-line', + 'fr-icon-tablet-fill', + 'fr-icon-tablet-line', + 'fr-icon-tv-fill', + 'fr-icon-tv-line', + 'fr-icon-u-disk-fill', + 'fr-icon-u-disk-line', + 'fr-icon-uninstall-fill', + 'fr-icon-uninstall-line', + 'fr-icon-usb-fill', + 'fr-icon-usb-line', + 'fr-icon-wifi-fill', + 'fr-icon-wifi-line', + 'fr-icon-wifi-off-fill', + 'fr-icon-wifi-off-line', + 'fr-icon-wireless-charging-fill', + 'fr-icon-wireless-charging-line', + ], + + 'Document' => [ + 'fr-icon-article-fill', + 'fr-icon-article-line', + 'fr-icon-book-2-fill', + 'fr-icon-book-2-line', + 'fr-icon-booklet-fill', + 'fr-icon-booklet-line', + 'fr-icon-clipboard-fill', + 'fr-icon-clipboard-line', + 'fr-icon-draft-fill', + 'fr-icon-draft-line', + 'fr-icon-file-add-fill', + 'fr-icon-file-add-line', + 'fr-icon-file-download-fill', + 'fr-icon-file-download-line', + 'fr-icon-file-fill', + 'fr-icon-file-line', + 'fr-icon-file-pdf-fill', + 'fr-icon-file-pdf-line', + 'fr-icon-file-text-fill', + 'fr-icon-file-text-line', + 'fr-icon-folder-2-fill', + 'fr-icon-folder-2-line', + 'fr-icon-newspaper-fill', + 'fr-icon-newspaper-line', + 'fr-icon-survey-fill', + 'fr-icon-survey-line', + 'fr-icon-todo-fill', + 'fr-icon-todo-line', + ], + + 'Editor' => [ + 'fr-icon-align-center', + 'fr-icon-align-justify', + 'fr-icon-align-left', + 'fr-icon-align-right', + 'fr-icon-bold', + 'fr-icon-code-block', + 'fr-icon-code-view', + 'fr-icon-font-color', + 'fr-icon-font-size', + 'fr-icon-format-clear', + 'fr-icon-h-1', + 'fr-icon-h-2', + 'fr-icon-h-3', + 'fr-icon-h-4', + 'fr-icon-h-5', + 'fr-icon-h-6', + 'fr-icon-hashtag', + 'fr-icon-highlight', + 'fr-icon-indent-decrease', + 'fr-icon-indent-increase', + 'fr-icon-italic', + 'fr-icon-link', + 'fr-icon-link-unlink', + 'fr-icon-list-check', + 'fr-icon-list-ordered', + 'fr-icon-list-unordered', + 'fr-icon-question-mark', + 'fr-icon-quote-fill', + 'fr-icon-quote-line', + 'fr-icon-separator', + 'fr-icon-sort-asc', + 'fr-icon-sort-desc', + 'fr-icon-space', + 'fr-icon-strikethrough', + 'fr-icon-subscript', + 'fr-icon-superscript', + 'fr-icon-table-2', + 'fr-icon-text-direction-r', + 'fr-icon-translate-2', + 'fr-icon-underline', + ], + + 'Finance' => [ + 'fr-icon-bank-card-fill', + 'fr-icon-bank-card-line', + 'fr-icon-coin-fill', + 'fr-icon-gift-fill', + 'fr-icon-gift-line', + 'fr-icon-money-euro-box-fill', + 'fr-icon-money-euro-box-line', + 'fr-icon-money-euro-circle-fill', + 'fr-icon-money-euro-circle-line', + 'fr-icon-secure-payment-fill', + 'fr-icon-secure-payment-line', + 'fr-icon-shopping-bag-fill', + 'fr-icon-shopping-bag-line', + 'fr-icon-shopping-cart-2-fill', + 'fr-icon-shopping-cart-2-line', + 'fr-icon-trophy-fill', + 'fr-icon-trophy-line', + ], + + 'Health' => [ + 'fr-icon-capsule-fill', + 'fr-icon-capsule-line', + 'fr-icon-dislike-fill', + 'fr-icon-dislike-line', + 'fr-icon-dossier-fill', + 'fr-icon-dossier-line', + 'fr-icon-first-aid-kit-fill', + 'fr-icon-first-aid-kit-line', + 'fr-icon-hand-sanitizer-fill', + 'fr-icon-hand-sanitizer-line', + 'fr-icon-health-book-fill', + 'fr-icon-health-book-line', + 'fr-icon-heart-fill', + 'fr-icon-heart-line', + 'fr-icon-heart-pulse-fill', + 'fr-icon-heart-pulse-line', + 'fr-icon-lungs-fill', + 'fr-icon-lungs-line', + 'fr-icon-medicine-bottle-fill', + 'fr-icon-medicine-bottle-line', + 'fr-icon-mental-health-fill', + 'fr-icon-mental-health-line', + 'fr-icon-microscope-fill', + 'fr-icon-microscope-line', + 'fr-icon-psychotherapy-fill', + 'fr-icon-psychotherapy-line', + 'fr-icon-pulse-line', + 'fr-icon-stethoscope-fill', + 'fr-icon-stethoscope-line', + 'fr-icon-surgical-mask-fill', + 'fr-icon-surgical-mask-line', + 'fr-icon-syringe-fill', + 'fr-icon-syringe-line', + 'fr-icon-test-tube-fill', + 'fr-icon-test-tube-line', + 'fr-icon-thermometer-fill', + 'fr-icon-thermometer-line', + 'fr-icon-virus-fill', + 'fr-icon-virus-line', + ], + + 'Logos' => [ + 'fr-icon-bluesky-fill', + 'fr-icon-bluesky-line', + 'fr-icon-chrome-fill', + 'fr-icon-chrome-line', + 'fr-icon-dailymotion-fill', + 'fr-icon-dailymotion-line', + 'fr-icon-edge-fill', + 'fr-icon-edge-line', + 'fr-icon-facebook-circle-fill', + 'fr-icon-facebook-circle-line', + 'fr-icon-firefox-fill', + 'fr-icon-firefox-line', + 'fr-icon-github-fill', + 'fr-icon-github-line', + 'fr-icon-google-fill', + 'fr-icon-google-line', + 'fr-icon-ie-fill', + 'fr-icon-ie-line', + 'fr-icon-instagram-fill', + 'fr-icon-instagram-line', + 'fr-icon-linkedin-box-fill', + 'fr-icon-linkedin-box-line', + 'fr-icon-mastodon-fill', + 'fr-icon-mastodon-line', + 'fr-icon-npmjs-fill', + 'fr-icon-npmjs-line', + 'fr-icon-remixicon-fill', + 'fr-icon-remixicon-line', + 'fr-icon-safari-fill', + 'fr-icon-safari-line', + 'fr-icon-slack-fill', + 'fr-icon-slack-line', + 'fr-icon-snapchat-fill', + 'fr-icon-snapchat-line', + 'fr-icon-telegram-fill', + 'fr-icon-telegram-line', + 'fr-icon-threads-fill', + 'fr-icon-threads-line', + 'fr-icon-tiktok-fill', + 'fr-icon-tiktok-line', + 'fr-icon-twitch-fill', + 'fr-icon-twitch-line', + 'fr-icon-twitter-fill', + 'fr-icon-twitter-line', + 'fr-icon-twitter-x-fill', + 'fr-icon-twitter-x-line', + 'fr-icon-vimeo-fill', + 'fr-icon-vimeo-line', + 'fr-icon-vuejs-fill', + 'fr-icon-vuejs-line', + 'fr-icon-whatsapp-fill', + 'fr-icon-whatsapp-line', + 'fr-icon-youtube-fill', + 'fr-icon-youtube-line', + ], + + 'Map' => [ + 'fr-icon-anchor-fill', + 'fr-icon-anchor-line', + 'fr-icon-bike-fill', + 'fr-icon-bike-line', + 'fr-icon-bus-fill', + 'fr-icon-bus-line', + 'fr-icon-car-fill', + 'fr-icon-car-line', + 'fr-icon-caravan-fill', + 'fr-icon-caravan-line', + 'fr-icon-charging-pile-2-fill', + 'fr-icon-charging-pile-2-line', + 'fr-icon-compass-3-fill', + 'fr-icon-compass-3-line', + 'fr-icon-cup-fill', + 'fr-icon-cup-line', + 'fr-icon-earth-fill', + 'fr-icon-earth-line', + 'fr-icon-france-fill', + 'fr-icon-france-line', + 'fr-icon-gas-station-fill', + 'fr-icon-gas-station-line', + 'fr-icon-goblet-fill', + 'fr-icon-goblet-line', + 'fr-icon-map-pin-2-fill', + 'fr-icon-map-pin-2-line', + 'fr-icon-map-pin-user-fill', + 'fr-icon-map-pin-user-line', + 'fr-icon-motorbike-fill', + 'fr-icon-motorbike-line', + 'fr-icon-passport-fill', + 'fr-icon-passport-line', + 'fr-icon-restaurant-fill', + 'fr-icon-restaurant-line', + 'fr-icon-road-map-fill', + 'fr-icon-road-map-line', + 'fr-icon-sailboat-fill', + 'fr-icon-sailboat-line', + 'fr-icon-ship-2-fill', + 'fr-icon-ship-2-line', + 'fr-icon-signal-tower-fill', + 'fr-icon-signal-tower-line', + 'fr-icon-suitcase-2-fill', + 'fr-icon-suitcase-2-line', + 'fr-icon-taxi-fill', + 'fr-icon-taxi-line', + 'fr-icon-train-fill', + 'fr-icon-train-line', + ], + + 'Media' => [ + 'fr-icon-camera-fill', + 'fr-icon-camera-line', + 'fr-icon-clapperboard-fill', + 'fr-icon-clapperboard-line', + 'fr-icon-equalizer-fill', + 'fr-icon-equalizer-line', + 'fr-icon-film-fill', + 'fr-icon-film-line', + 'fr-icon-fullscreen-line', + 'fr-icon-gallery-fill', + 'fr-icon-gallery-line', + 'fr-icon-headphone-fill', + 'fr-icon-headphone-line', + 'fr-icon-image-add-fill', + 'fr-icon-image-add-line', + 'fr-icon-image-edit-fill', + 'fr-icon-image-edit-line', + 'fr-icon-image-fill', + 'fr-icon-image-line', + 'fr-icon-live-fill', + 'fr-icon-live-line', + 'fr-icon-mic-fill', + 'fr-icon-mic-line', + 'fr-icon-music-2-fill', + 'fr-icon-music-2-line', + 'fr-icon-notification-3-fill', + 'fr-icon-notification-3-line', + 'fr-icon-pause-circle-fill', + 'fr-icon-pause-circle-line', + 'fr-icon-play-circle-fill', + 'fr-icon-play-circle-line', + 'fr-icon-play-fill', + 'fr-icon-play-line', + 'fr-icon-stop-circle-fill', + 'fr-icon-stop-circle-line', + 'fr-icon-volume-down-fill', + 'fr-icon-volume-down-line', + 'fr-icon-volume-mute-fill', + 'fr-icon-volume-mute-line', + 'fr-icon-volume-up-fill', + 'fr-icon-volume-up-line', + ], + + 'Other' => [ + 'fr-icon-accessibility-fill', + 'fr-icon-accessibility-line', + 'fr-icon-ear-off-fill', + 'fr-icon-ear-off-line', + 'fr-icon-leaf-fill', + 'fr-icon-leaf-line', + 'fr-icon-lightbulb-fill', + 'fr-icon-lightbulb-line', + 'fr-icon-mental-disabilities-fill', + 'fr-icon-mental-disabilities-line', + 'fr-icon-plant-fill', + 'fr-icon-plant-line', + 'fr-icon-recycle-fill', + 'fr-icon-recycle-line', + 'fr-icon-scales-3-fill', + 'fr-icon-scales-3-line', + 'fr-icon-seedling-fill', + 'fr-icon-seedling-line', + 'fr-icon-sign-language-fill', + 'fr-icon-sign-language-line', + 'fr-icon-umbrella-fill', + 'fr-icon-umbrella-line', + 'fr-icon-wheelchair-fill', + 'fr-icon-wheelchair-line', + ], + + 'System' => [ + 'fr-icon-add-circle-fill', + 'fr-icon-add-circle-line', + 'fr-icon-add-line', + 'fr-icon-alarm-warning-fill', + 'fr-icon-alarm-warning-line', + 'fr-icon-alert-fill', + 'fr-icon-alert-line', + 'fr-icon-alert-warning-2-fill', + 'fr-icon-alert-warning-fill', + 'fr-icon-capslock-line', + 'fr-icon-check-line', + 'fr-icon-checkbox-circle-fill', + 'fr-icon-checkbox-circle-line', + 'fr-icon-checkbox-fill', + 'fr-icon-checkbox-line', + 'fr-icon-close-circle-fill', + 'fr-icon-close-circle-line', + 'fr-icon-close-line', + 'fr-icon-delete-bin-fill', + 'fr-icon-delete-bin-line', + 'fr-icon-delete-fill', + 'fr-icon-delete-line', + 'fr-icon-download-fill', + 'fr-icon-download-line', + 'fr-icon-equal-circle-fill', + 'fr-icon-error-fill', + 'fr-icon-error-line', + 'fr-icon-error-warning-fill', + 'fr-icon-error-warning-line', + 'fr-icon-external-link-fill', + 'fr-icon-external-link-line', + 'fr-icon-eye-fill', + 'fr-icon-eye-line', + 'fr-icon-eye-off-fill', + 'fr-icon-eye-off-line', + 'fr-icon-filter-fill', + 'fr-icon-filter-line', + 'fr-icon-info-fill', + 'fr-icon-info-line', + 'fr-icon-information-fill', + 'fr-icon-information-line', + 'fr-icon-lock-fill', + 'fr-icon-lock-line', + 'fr-icon-lock-unlock-fill', + 'fr-icon-lock-unlock-line', + 'fr-icon-logout-box-r-fill', + 'fr-icon-logout-box-r-line', + 'fr-icon-menu-2-fill', + 'fr-icon-menu-fill', + 'fr-icon-more-fill', + 'fr-icon-more-line', + 'fr-icon-notification-badge-fill', + 'fr-icon-notification-badge-line', + 'fr-icon-question-fill', + 'fr-icon-question-line', + 'fr-icon-refresh-fill', + 'fr-icon-refresh-line', + 'fr-icon-search-fill', + 'fr-icon-search-line', + 'fr-icon-settings-5-fill', + 'fr-icon-settings-5-line', + 'fr-icon-share-fill', + 'fr-icon-share-forward-fill', + 'fr-icon-share-forward-line', + 'fr-icon-share-line', + 'fr-icon-shield-fill', + 'fr-icon-shield-line', + 'fr-icon-star-fill', + 'fr-icon-star-line', + 'fr-icon-star-s-fill', + 'fr-icon-star-s-line', + 'fr-icon-subtract-line', + 'fr-icon-success-fill', + 'fr-icon-success-line', + 'fr-icon-theme-fill', + 'fr-icon-thumb-down-fill', + 'fr-icon-thumb-down-line', + 'fr-icon-thumb-up-fill', + 'fr-icon-thumb-up-line', + 'fr-icon-time-fill', + 'fr-icon-time-line', + 'fr-icon-timer-fill', + 'fr-icon-timer-line', + 'fr-icon-upload-2-fill', + 'fr-icon-upload-2-line', + 'fr-icon-upload-fill', + 'fr-icon-upload-line', + 'fr-icon-warning-fill', + 'fr-icon-warning-line', + 'fr-icon-zoom-in-fill', + 'fr-icon-zoom-in-line', + 'fr-icon-zoom-out-fill', + 'fr-icon-zoom-out-line', + ], + + 'User' => [ + 'fr-icon-account-circle-fill', + 'fr-icon-account-circle-line', + 'fr-icon-account-fill', + 'fr-icon-account-line', + 'fr-icon-account-pin-circle-fill', + 'fr-icon-account-pin-circle-line', + 'fr-icon-admin-fill', + 'fr-icon-admin-line', + 'fr-icon-group-fill', + 'fr-icon-group-line', + 'fr-icon-parent-fill', + 'fr-icon-parent-line', + 'fr-icon-team-fill', + 'fr-icon-team-line', + 'fr-icon-user-add-fill', + 'fr-icon-user-add-line', + 'fr-icon-user-fill', + 'fr-icon-user-heart-fill', + 'fr-icon-user-heart-line', + 'fr-icon-user-line', + 'fr-icon-user-search-fill', + 'fr-icon-user-search-line', + 'fr-icon-user-setting-fill', + 'fr-icon-user-setting-line', + 'fr-icon-user-star-fill', + 'fr-icon-user-star-line', + ], + + 'Weather' => [ + 'fr-icon-avalanches-fill', + 'fr-icon-avalanches-line', + 'fr-icon-cloudy-2-fill', + 'fr-icon-cloudy-2-line', + 'fr-icon-fire-fill', + 'fr-icon-fire-line', + 'fr-icon-flashlight-fill', + 'fr-icon-flashlight-line', + 'fr-icon-flood-fill', + 'fr-icon-flood-line', + 'fr-icon-heavy-showers-fill', + 'fr-icon-heavy-showers-line', + 'fr-icon-moon-fill', + 'fr-icon-moon-line', + 'fr-icon-snowy-fill', + 'fr-icon-snowy-line', + 'fr-icon-sparkling-2-fill', + 'fr-icon-sparkling-2-line', + 'fr-icon-submersion-fill', + 'fr-icon-submersion-line', + 'fr-icon-sun-fill', + 'fr-icon-sun-line', + 'fr-icon-temp-cold-fill', + 'fr-icon-temp-cold-line', + 'fr-icon-thunderstorms-fill', + 'fr-icon-thunderstorms-line', + 'fr-icon-tornado-fill', + 'fr-icon-tornado-line', + 'fr-icon-typhoon-fill', + 'fr-icon-typhoon-line', + 'fr-icon-windy-fill', + 'fr-icon-windy-line', + ], + + ]; +} diff --git a/wp-dsfr-theme/inc/Services/Assets.php b/wp-dsfr-theme/inc/Services/Assets.php index 7195302..af9e896 100644 --- a/wp-dsfr-theme/inc/Services/Assets.php +++ b/wp-dsfr-theme/inc/Services/Assets.php @@ -273,7 +273,7 @@ private function get_assets_version(): null|string { * @return string */ private function get_dsfr_version(): string { - return '1.11.2'; + return '1.14.3'; } /** diff --git a/wp-dsfr-theme/package.json b/wp-dsfr-theme/package.json index b578e1c..6868f9a 100644 --- a/wp-dsfr-theme/package.json +++ b/wp-dsfr-theme/package.json @@ -1,6 +1,6 @@ { "name": "wp-dsfr-theme", - "version": "1.0.0", + "version": "2026.0.0", "description": "DSFR theme for WordPress", "author": "Be API", "repository": { @@ -42,33 +42,33 @@ ], "license": "GPL-2.0", "dependencies": { - "@gouvfr/dsfr": "1.13.0", + "@gouvfr/dsfr": "1.14.3", "oneloop.js": "^5.0.2" }, "devDependencies": { - "@wordpress/blocks": "^14.7.0", + "@wordpress/blocks": "^15.22.0", "@wordpress/dependency-extraction-webpack-plugin": "^4.0.0", "@wordpress/dom-ready": "^3.17.0", - "@wordpress/env": "^9.8.0", + "@wordpress/env": "^11.9.0", "@wordpress/hooks": "^3.17.0", - "@wordpress/scripts": "^28.5.0", + "@wordpress/scripts": "^19.2.4", "@wordpress/stylelint-config": "^21.0.0", - "browser-sync": "^2.27.10", + "browser-sync": "^3.0.4", "browser-sync-webpack-plugin": "^2.3.0", "clean-webpack-plugin": "^4.0.0-alpha.0", "css-loader": "^5.2.4", "cssnano": "^5.0.1", - "esbuild-loader": "^2.19.0", + "esbuild-loader": "^4.5.0", "eslint": "^8.23.1", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.2.1", "eslint-webpack-plugin": "^3.2.0", - "image-minimizer-webpack-plugin": "^3.8.2", - "imagemin": "^8.0.1", + "image-minimizer-webpack-plugin": "^5.0.0", + "imagemin": "^7.0.1", "imagemin-gifsicle": "^7.0.0", - "imagemin-jpegtran": "^7.0.0", + "imagemin-jpegtran": "^8.0.0", "imagemin-optipng": "^8.0.0", - "imagemin-svgo": "^10.0.1", + "imagemin-svgo": "^12.0.0", "js-yaml": "^4.1.0", "json2csv": "^5.0.6", "mini-css-extract-plugin": "^1.5.0", @@ -90,7 +90,7 @@ "stylelint-config-recess-order": "^3.0.0", "stylelint-scss": "^4.3.0", "stylelint-webpack-plugin": "^3.3.0", - "svg-sprite-loader": "^6.0.10", + "svg-sprite-loader": "^6.0.11", "svgo": "^3.0.2", "svgo-loader": "^3.0.0", "terser-webpack-plugin": "^5.3.6", @@ -99,9 +99,9 @@ "webpack-cli": "^4.6.0", "webpack-manifest-plugin": "5.0.0", "webpack-merge": "^5.7.3", - "webpackbar": "^5.0.0-3" + "webpackbar": "^7.0.0" }, "volta": { - "node": "20.13.1" + "node": "24.11.0" } } diff --git a/wp-dsfr-theme/patterns/fr-icon-informations.php b/wp-dsfr-theme/patterns/fr-icon-informations.php index 9274657..fdabbde 100644 --- a/wp-dsfr-theme/patterns/fr-icon-informations.php +++ b/wp-dsfr-theme/patterns/fr-icon-informations.php @@ -19,669 +19,12 @@
            [ - 'fr-icon-ancient-gate-fill', - 'fr-icon-ancient-gate-line', - 'fr-icon-ancient-pavilion-fill', - 'fr-icon-ancient-pavilion-line', - 'fr-icon-bank-fill', - 'fr-icon-bank-line', - 'fr-icon-building-fill', - 'fr-icon-building-line', - 'fr-icon-community-fill', - 'fr-icon-community-line', - 'fr-icon-government-fill', - 'fr-icon-government-line', - 'fr-icon-home-4-fill', - 'fr-icon-home-4-line', - 'fr-icon-hospital-fill', - 'fr-icon-hospital-line', - 'fr-icon-hotel-fill', - 'fr-icon-hotel-line', - 'fr-icon-store-fill', - 'fr-icon-store-line', - ], - - 'Business' => [ - 'fr-icon-archive-fill', - 'fr-icon-archive-line', - 'fr-icon-attachment-fill', - 'fr-icon-attachment-line', - 'fr-icon-award-fill', - 'fr-icon-award-line', - 'fr-icon-bar-chart-box-fill', - 'fr-icon-bar-chart-box-line', - 'fr-icon-bookmark-fill', - 'fr-icon-bookmark-line', - 'fr-icon-briefcase-fill', - 'fr-icon-briefcase-line', - 'fr-icon-calendar-2-fill', - 'fr-icon-calendar-2-line', - 'fr-icon-calendar-event-fill', - 'fr-icon-calendar-event-line', - 'fr-icon-calendar-fill', - 'fr-icon-calendar-line', - 'fr-icon-cloud-fill', - 'fr-icon-cloud-line', - 'fr-icon-copyright-fill', - 'fr-icon-copyright-line', - 'fr-icon-customer-service-fill', - 'fr-icon-customer-service-line', - 'fr-icon-flag-fill', - 'fr-icon-flag-line', - 'fr-icon-global-fill', - 'fr-icon-global-line', - 'fr-icon-line-chart-fill', - 'fr-icon-line-chart-line', - 'fr-icon-links-fill', - 'fr-icon-links-line', - 'fr-icon-mail-fill', - 'fr-icon-mail-line', - 'fr-icon-mail-open-fill', - 'fr-icon-mail-open-line', - 'fr-icon-medal-fill', - 'fr-icon-medal-line', - 'fr-icon-pie-chart-2-fill', - 'fr-icon-pie-chart-2-line', - 'fr-icon-pie-chart-box-fill', - 'fr-icon-pie-chart-box-line', - 'fr-icon-printer-fill', - 'fr-icon-printer-line', - 'fr-icon-profil-fill', - 'fr-icon-profil-line', - 'fr-icon-projector-2-fill', - 'fr-icon-projector-2-line', - 'fr-icon-send-plane-fill', - 'fr-icon-send-plane-line', - 'fr-icon-slideshow-fill', - 'fr-icon-slideshow-line', - 'fr-icon-window-fill', - 'fr-icon-window-line', - ], - - 'Communication' => [ - 'fr-icon-chat-2-fill', - 'fr-icon-chat-2-line', - 'fr-icon-chat-3-fill', - 'fr-icon-chat-3-line', - 'fr-icon-chat-check-fill', - 'fr-icon-chat-check-line', - 'fr-icon-chat-delete-fill', - 'fr-icon-chat-delete-line', - 'fr-icon-chat-poll-fill', - 'fr-icon-chat-poll-line', - 'fr-icon-discuss-fill', - 'fr-icon-discuss-line', - 'fr-icon-feedback-fill', - 'fr-icon-feedback-line', - 'fr-icon-message-2-fill', - 'fr-icon-message-2-line', - 'fr-icon-question-answer-fill', - 'fr-icon-question-answer-line', - 'fr-icon-questionnaire-fill', - 'fr-icon-questionnaire-line', - 'fr-icon-video-chat-fill', - 'fr-icon-video-chat-line', - ], - - 'Design' => [ - 'fr-icon-ball-pen-fill', - 'fr-icon-ball-pen-line', - 'fr-icon-brush-3-fill', - 'fr-icon-brush-3-line', - 'fr-icon-brush-fill', - 'fr-icon-brush-line', - 'fr-icon-contrast-fill', - 'fr-icon-contrast-line', - 'fr-icon-crop-fill', - 'fr-icon-crop-line', - 'fr-icon-drag-move-2-fill', - 'fr-icon-drag-move-2-line', - 'fr-icon-drop-fill', - 'fr-icon-drop-line', - 'fr-icon-edit-box-fill', - 'fr-icon-edit-box-line', - 'fr-icon-edit-fill', - 'fr-icon-edit-line', - 'fr-icon-ink-bottle-fill', - 'fr-icon-ink-bottle-line', - 'fr-icon-layout-grid-fill', - 'fr-icon-layout-grid-line', - 'fr-icon-mark-pen-fill', - 'fr-icon-mark-pen-line', - 'fr-icon-paint-brush-fill', - 'fr-icon-paint-brush-line', - 'fr-icon-paint-fill', - 'fr-icon-paint-line', - 'fr-icon-palette-fill', - 'fr-icon-palette-line', - 'fr-icon-pantone-fill', - 'fr-icon-pantone-line', - 'fr-icon-pen-nib-fill', - 'fr-icon-pen-nib-line', - 'fr-icon-pencil-fill', - 'fr-icon-pencil-line', - 'fr-icon-pencil-ruler-fill', - 'fr-icon-pencil-ruler-line', - 'fr-icon-sip-fill', - 'fr-icon-sip-line', - 'fr-icon-table-fill', - 'fr-icon-table-line', - ], - - 'Development' => [ - 'fr-icon-bug-fill', - 'fr-icon-bug-line', - 'fr-icon-code-box-fill', - 'fr-icon-code-box-line', - 'fr-icon-code-s-slash-line', - 'fr-icon-cursor-fill', - 'fr-icon-cursor-line', - 'fr-icon-git-branch-fill', - 'fr-icon-git-branch-line', - 'fr-icon-git-commit-fill', - 'fr-icon-git-commit-line', - 'fr-icon-git-merge-fill', - 'fr-icon-git-merge-line', - 'fr-icon-git-pull-request-fill', - 'fr-icon-git-pull-request-line', - 'fr-icon-git-repository-commits-fill', - 'fr-icon-git-repository-commits-line', - 'fr-icon-git-repository-fill', - 'fr-icon-git-repository-line', - 'fr-icon-git-repository-private-fill', - 'fr-icon-git-repository-private-line', - 'fr-icon-terminal-box-fill', - 'fr-icon-terminal-box-line', - 'fr-icon-terminal-line', - 'fr-icon-terminal-window-fill', - 'fr-icon-terminal-window-line', - ], - - 'Device' => [ - 'fr-icon-bluetooth-fill', - 'fr-icon-bluetooth-line', - 'fr-icon-computer-fill', - 'fr-icon-computer-line', - 'fr-icon-dashboard-3-fill', - 'fr-icon-dashboard-3-line', - 'fr-icon-database-fill', - 'fr-icon-database-line', - 'fr-icon-device-fill', - 'fr-icon-device-line', - 'fr-icon-hard-drive-2-fill', - 'fr-icon-hard-drive-2-line', - 'fr-icon-mac-fill', - 'fr-icon-mac-line', - 'fr-icon-phone-fill', - 'fr-icon-phone-line', - 'fr-icon-qr-code-fill', - 'fr-icon-qr-code-line', - 'fr-icon-rss-fill', - 'fr-icon-rss-line', - 'fr-icon-save-3-fill', - 'fr-icon-save-3-line', - 'fr-icon-save-fill', - 'fr-icon-save-line', - 'fr-icon-server-fill', - 'fr-icon-server-line', - 'fr-icon-smartphone-fill', - 'fr-icon-smartphone-line', - 'fr-icon-tablet-fill', - 'fr-icon-tablet-line', - 'fr-icon-tv-fill', - 'fr-icon-tv-line', - 'fr-icon-wifi-fill', - 'fr-icon-wifi-line', - ], - - 'Document' => [ - 'fr-icon-article-fill', - 'fr-icon-article-line', - 'fr-icon-book-2-fill', - 'fr-icon-book-2-line', - 'fr-icon-booklet-fill', - 'fr-icon-booklet-line', - 'fr-icon-clipboard-fill', - 'fr-icon-clipboard-line', - 'fr-icon-draft-fill', - 'fr-icon-draft-line', - 'fr-icon-file-add-fill', - 'fr-icon-file-add-line', - 'fr-icon-file-download-fill', - 'fr-icon-file-download-line', - 'fr-icon-file-fill', - 'fr-icon-file-line', - 'fr-icon-file-pdf-fill', - 'fr-icon-file-pdf-line', - 'fr-icon-file-text-fill', - 'fr-icon-file-text-line', - 'fr-icon-folder-2-fill', - 'fr-icon-folder-2-line', - 'fr-icon-newspaper-fill', - 'fr-icon-newspaper-line', - 'fr-icon-survey-fill', - 'fr-icon-survey-line', - 'fr-icon-todo-fill', - 'fr-icon-todo-line', - ], - - 'Editor' => [ - 'fr-icon-bold', - 'fr-icon-highlight', - 'fr-icon-quote-fill', - 'fr-icon-quote-line', - 'fr-icon-code-view', - 'fr-icon-font-size', - 'fr-icon-h-1', - 'fr-icon-h-2', - 'fr-icon-h-3', - 'fr-icon-h-4', - 'fr-icon-h-5', - 'fr-icon-h-6', - 'fr-icon-hashtag', - 'fr-icon-italic', - 'fr-icon-link-unlink', - 'fr-icon-link', - 'fr-icon-list-ordered', - 'fr-icon-list-unordered', - 'fr-icon-question-mark', - 'fr-icon-separator', - 'fr-icon-space', - 'fr-icon-subscript', - 'fr-icon-superscript', - 'fr-icon-table-2', - 'fr-icon-translate-2', - ], - - 'Finance' => [ - 'fr-icon-bank-card-fill', - 'fr-icon-bank-card-line', - 'fr-icon-coin-fill', - 'fr-icon-gift-fill', - 'fr-icon-gift-line', - 'fr-icon-money-euro-box-fill', - 'fr-icon-money-euro-box-line', - 'fr-icon-money-euro-circle-fill', - 'fr-icon-money-euro-circle-line', - 'fr-icon-secure-payment-fill', - 'fr-icon-secure-payment-line', - 'fr-icon-shopping-bag-fill', - 'fr-icon-shopping-bag-line', - 'fr-icon-shopping-cart-2-fill', - 'fr-icon-shopping-cart-2-line', - 'fr-icon-trophy-fill', - 'fr-icon-trophy-line', - ], - - 'Health' => [ - 'fr-icon-capsule-fill', - 'fr-icon-capsule-line', - 'fr-icon-dislike-fill', - 'fr-icon-dislike-line', - 'fr-icon-dossier-fill', - 'fr-icon-dossier-line', - 'fr-icon-first-aid-kit-fill', - 'fr-icon-first-aid-kit-line', - 'fr-icon-hand-sanitizer-fill', - 'fr-icon-hand-sanitizer-line', - 'fr-icon-health-book-fill', - 'fr-icon-health-book-line', - 'fr-icon-heart-fill', - 'fr-icon-heart-line', - 'fr-icon-heart-pulse-fill', - 'fr-icon-heart-pulse-line', - 'fr-icon-lungs-fill', - 'fr-icon-lungs-line', - 'fr-icon-medicine-bottle-fill', - 'fr-icon-medicine-bottle-line', - 'fr-icon-mental-health-fill', - 'fr-icon-mental-health-line', - 'fr-icon-microscope-fill', - 'fr-icon-microscope-line', - 'fr-icon-psychotherapy-fill', - 'fr-icon-psychotherapy-line', - 'fr-icon-pulse-line', - 'fr-icon-stethoscope-fill', - 'fr-icon-stethoscope-line', - 'fr-icon-surgical-mask-fill', - 'fr-icon-surgical-mask-line', - 'fr-icon-syringe-fill', - 'fr-icon-syringe-line', - 'fr-icon-test-tube-fill', - 'fr-icon-test-tube-line', - 'fr-icon-thermometer-fill', - 'fr-icon-thermometer-line', - 'fr-icon-virus-fill', - 'fr-icon-virus-line', - ], - - 'Logos' => [ - 'fr-icon-dailymotion-fill', - 'fr-icon-dailymotion-line', - 'fr-icon-tiktok-fill', - 'fr-icon-tiktok-line', - 'fr-icon-chrome-fill', - 'fr-icon-chrome-line', - 'fr-icon-edge-fill', - 'fr-icon-edge-line', - 'fr-icon-facebook-circle-fill', - 'fr-icon-facebook-circle-line', - 'fr-icon-firefox-fill', - 'fr-icon-firefox-line', - 'fr-icon-github-fill', - 'fr-icon-github-line', - 'fr-icon-google-fill', - 'fr-icon-google-line', - 'fr-icon-ie-fill', - 'fr-icon-ie-line', - 'fr-icon-instagram-fill', - 'fr-icon-instagram-line', - 'fr-icon-linkedin-box-fill', - 'fr-icon-linkedin-box-line', - 'fr-icon-mastodon-fill', - 'fr-icon-mastodon-line', - 'fr-icon-npmjs-fill', - 'fr-icon-npmjs-line', - 'fr-icon-remixicon-fill', - 'fr-icon-remixicon-line', - 'fr-icon-safari-fill', - 'fr-icon-safari-line', - 'fr-icon-slack-fill', - 'fr-icon-slack-line', - 'fr-icon-snapchat-fill', - 'fr-icon-snapchat-line', - 'fr-icon-telegram-fill', - 'fr-icon-telegram-line', - 'fr-icon-twitch-fill', - 'fr-icon-twitch-line', - 'fr-icon-twitter-x-fill', - 'fr-icon-twitter-x-line', - 'fr-icon-threads-fill', - 'fr-icon-threads-line', - 'fr-icon-twitter-fill', - 'fr-icon-twitter-line', - 'fr-icon-vimeo-fill', - 'fr-icon-vimeo-line', - 'fr-icon-vuejs-fill', - 'fr-icon-vuejs-line', - 'fr-icon-youtube-fill', - 'fr-icon-youtube-line', - ], - - 'Map' => [ - 'fr-icon-anchor-fill', - 'fr-icon-anchor-line', - 'fr-icon-bike-fill', - 'fr-icon-bike-line', - 'fr-icon-bus-fill', - 'fr-icon-bus-line', - 'fr-icon-car-fill', - 'fr-icon-car-line', - 'fr-icon-caravan-fill', - 'fr-icon-caravan-line', - 'fr-icon-charging-pile-2-fill', - 'fr-icon-charging-pile-2-line', - 'fr-icon-compass-3-fill', - 'fr-icon-compass-3-line', - 'fr-icon-cup-fill', - 'fr-icon-cup-line', - 'fr-icon-earth-fill', - 'fr-icon-earth-line', - 'fr-icon-france-fill', - 'fr-icon-france-line', - 'fr-icon-gas-station-fill', - 'fr-icon-gas-station-line', - 'fr-icon-goblet-fill', - 'fr-icon-goblet-line', - 'fr-icon-map-pin-2-fill', - 'fr-icon-map-pin-2-line', - 'fr-icon-map-pin-user-fill', - 'fr-icon-map-pin-user-line', - 'fr-icon-motorbike-fill', - 'fr-icon-motorbike-line', - 'fr-icon-passport-fill', - 'fr-icon-passport-line', - 'fr-icon-restaurant-fill', - 'fr-icon-restaurant-line', - 'fr-icon-road-map-fill', - 'fr-icon-road-map-line', - 'fr-icon-sailboat-fill', - 'fr-icon-sailboat-line', - 'fr-icon-ship-2-fill', - 'fr-icon-ship-2-line', - 'fr-icon-signal-tower-fill', - 'fr-icon-signal-tower-line', - 'fr-icon-suitcase-2-fill', - 'fr-icon-suitcase-2-line', - 'fr-icon-taxi-fill', - 'fr-icon-taxi-line', - 'fr-icon-train-fill', - 'fr-icon-train-line', - ], - - 'Media' => [ - 'fr-icon-camera-fill', - 'fr-icon-camera-line', - 'fr-icon-clapperboard-fill', - 'fr-icon-clapperboard-line', - 'fr-icon-equalizer-fill', - 'fr-icon-equalizer-line', - 'fr-icon-film-fill', - 'fr-icon-film-line', - 'fr-icon-gallery-fill', - 'fr-icon-gallery-line', - 'fr-icon-headphone-fill', - 'fr-icon-headphone-line', - 'fr-icon-image-add-fill', - 'fr-icon-image-add-line', - 'fr-icon-image-edit-fill', - 'fr-icon-image-edit-line', - 'fr-icon-image-fill', - 'fr-icon-image-line', - 'fr-icon-live-fill', - 'fr-icon-live-line', - 'fr-icon-mic-fill', - 'fr-icon-mic-line', - 'fr-icon-music-2-fill', - 'fr-icon-music-2-line', - 'fr-icon-notification-3-fill', - 'fr-icon-notification-3-line', - 'fr-icon-pause-circle-fill', - 'fr-icon-pause-circle-line', - 'fr-icon-play-circle-fill', - 'fr-icon-play-circle-line', - 'fr-icon-stop-circle-fill', - 'fr-icon-stop-circle-line', - 'fr-icon-volume-down-fill', - 'fr-icon-volume-down-line', - 'fr-icon-volume-mute-fill', - 'fr-icon-volume-mute-line', - 'fr-icon-volume-up-fill', - 'fr-icon-volume-up-line', - ], - - 'Other' => [ - 'fr-icon-accessibility-fill', - 'fr-icon-accessibility-line', - 'fr-icon-ear-off-fill', - 'fr-icon-ear-off-line', - 'fr-icon-leaf-fill', - 'fr-icon-leaf-line', - 'fr-icon-lightbulb-fill', - 'fr-icon-lightbulb-line', - 'fr-icon-mental-disabilities-fill', - 'fr-icon-mental-disabilities-line', - 'fr-icon-plant-fill', - 'fr-icon-plant-line', - 'fr-icon-recycle-fill', - 'fr-icon-recycle-line', - 'fr-icon-scales-3-fill', - 'fr-icon-scales-3-line', - 'fr-icon-seedling-fill', - 'fr-icon-seedling-line', - 'fr-icon-umbrella-fill', - 'fr-icon-umbrella-line', - 'fr-icon-wheelchair-fill', - 'fr-icon-wheelchair-line', - ], - - 'System' => [ - 'fr-icon-arrow-left-s-fill', - 'fr-icon-arrow-left-s-line', - 'fr-icon-arrow-right-s-fill', - 'fr-icon-arrow-right-s-line', - 'fr-icon-error-fill', - 'fr-icon-error-line', - 'fr-icon-info-fill', - 'fr-icon-info-line', - 'fr-icon-success-fill', - 'fr-icon-success-line', - 'fr-icon-warning-fill', - 'fr-icon-warning-line', - 'fr-icon-theme-fill', - 'fr-icon-add-circle-fill', - 'fr-icon-add-circle-line', - 'fr-icon-add-line', - 'fr-icon-alarm-warning-fill', - 'fr-icon-alarm-warning-line', - 'fr-icon-alert-fill', - 'fr-icon-alert-line', - 'fr-icon-arrow-down-fill', - 'fr-icon-arrow-down-line', - 'fr-icon-arrow-down-s-fill', - 'fr-icon-arrow-down-s-line', - 'fr-icon-arrow-go-back-fill', - 'fr-icon-arrow-go-back-line', - 'fr-icon-arrow-go-forward-fill', - 'fr-icon-arrow-go-forward-line', - 'fr-icon-arrow-left-fill', - 'fr-icon-arrow-left-line', - 'fr-icon-arrow-right-fill', - 'fr-icon-arrow-right-line', - 'fr-icon-arrow-right-up-line', - 'fr-icon-arrow-up-fill', - 'fr-icon-arrow-up-line', - 'fr-icon-arrow-up-s-fill', - 'fr-icon-arrow-up-s-line', - 'fr-icon-check-line', - 'fr-icon-checkbox-circle-fill', - 'fr-icon-checkbox-circle-line', - 'fr-icon-checkbox-fill', - 'fr-icon-checkbox-line', - 'fr-icon-close-circle-fill', - 'fr-icon-close-circle-line', - 'fr-icon-close-line', - 'fr-icon-delete-fill', - 'fr-icon-delete-line', - 'fr-icon-download-fill', - 'fr-icon-download-line', - 'fr-icon-error-warning-fill', - 'fr-icon-error-warning-line', - 'fr-icon-external-link-fill', - 'fr-icon-external-link-line', - 'fr-icon-eye-fill', - 'fr-icon-eye-line', - 'fr-icon-eye-off-fill', - 'fr-icon-eye-off-line', - 'fr-icon-filter-fill', - 'fr-icon-filter-line', - 'fr-icon-arrow-left-s-first-line', - 'fr-icon-arrow-left-s-line-double', - 'fr-icon-arrow-right-s-last-line', - 'fr-icon-arrow-right-s-line-double', - 'fr-icon-information-fill', - 'fr-icon-information-line', - 'fr-icon-lock-fill', - 'fr-icon-lock-line', - 'fr-icon-lock-unlock-fill', - 'fr-icon-lock-unlock-line', - 'fr-icon-logout-box-r-fill', - 'fr-icon-logout-box-r-line', - 'fr-icon-menu-2-fill', - 'fr-icon-menu-fill', - 'fr-icon-more-fill', - 'fr-icon-more-line', - 'fr-icon-notification-badge-fill', - 'fr-icon-notification-badge-line', - 'fr-icon-question-fill', - 'fr-icon-question-line', - 'fr-icon-refresh-fill', - 'fr-icon-refresh-line', - 'fr-icon-search-fill', - 'fr-icon-search-line', - 'fr-icon-settings-5-fill', - 'fr-icon-settings-5-line', - 'fr-icon-shield-fill', - 'fr-icon-shield-line', - 'fr-icon-star-fill', - 'fr-icon-star-line', - 'fr-icon-star-s-fill', - 'fr-icon-star-s-line', - 'fr-icon-subtract-line', - 'fr-icon-thumb-down-fill', - 'fr-icon-thumb-down-line', - 'fr-icon-thumb-up-fill', - 'fr-icon-thumb-up-line', - 'fr-icon-time-fill', - 'fr-icon-time-line', - 'fr-icon-timer-fill', - 'fr-icon-timer-line', - 'fr-icon-upload-2-fill', - 'fr-icon-upload-2-line', - 'fr-icon-upload-fill', - 'fr-icon-upload-line', - 'fr-icon-zoom-in-fill', - 'fr-icon-zoom-in-line', - 'fr-icon-zoom-out-fill', - 'fr-icon-zoom-out-line', - ], - - 'User' => [ - 'fr-icon-account-circle-fill', - 'fr-icon-account-circle-line', - 'fr-icon-account-fill', - 'fr-icon-account-line', - 'fr-icon-account-pin-circle-fill', - 'fr-icon-account-pin-circle-line', - 'fr-icon-admin-fill', - 'fr-icon-admin-line', - 'fr-icon-group-fill', - 'fr-icon-group-line', - 'fr-icon-parent-fill', - 'fr-icon-parent-line', - 'fr-icon-team-fill', - 'fr-icon-team-line', - 'fr-icon-user-add-fill', - 'fr-icon-user-add-line', - 'fr-icon-user-fill', - 'fr-icon-user-line', - 'fr-icon-user-heart-fill', - 'fr-icon-user-heart-line', - 'fr-icon-user-search-fill', - 'fr-icon-user-search-line', - 'fr-icon-user-setting-fill', - 'fr-icon-user-setting-line', - 'fr-icon-user-star-fill', - 'fr-icon-user-star-line', - ], - - 'Weather' => [ - 'fr-icon-cloudy-2-fill', - 'fr-icon-cloudy-2-line', - 'fr-icon-flashlight-fill', - 'fr-icon-flashlight-line', - 'fr-icon-moon-fill', - 'fr-icon-moon-line', - 'fr-icon-file-pdf-line', - ], - ]; + $available_icons = Beapi\Theme\Dsfr\Helpers\DSFR\get_dsfr_icons_by_category(); foreach ( $available_icons as $category => $classes ) : ?> -

            +

            diff --git a/wp-dsfr-theme/src/scss/01-abstract/_variables.scss b/wp-dsfr-theme/src/scss/01-abstract/_variables.scss index 3bad48d..1fa2831 100644 --- a/wp-dsfr-theme/src/scss/01-abstract/_variables.scss +++ b/wp-dsfr-theme/src/scss/01-abstract/_variables.scss @@ -1,5 +1,7 @@ @use "sass:map"; +$entry-file-name: "undefined" !default; + /** * Variables */ @@ -15,6 +17,10 @@ $color-light: #fff; $color-dark: #000; $color-dark-010: rgba(0, 0, 0, .1); $color-dark-005: rgba(0, 0, 0, .05); +$color-primary: #000091; +$color-text: #161616; +$color-grey-100: #eee; +$color-grey-500: #929292; // ========== // Sizes diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-assign-inputs.scss b/wp-dsfr-theme/src/scss/02-tools/_f-assign-inputs.scss index 2b330cd..a067197 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-assign-inputs.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-assign-inputs.scss @@ -10,7 +10,7 @@ @each $input in $inputs { $input: string.unquote($input); - $input: if($pseudo, $input + ":" + $pseudo, $input); + $input: if(sass($pseudo): $input + ":" + $pseudo; else: $input); $list: list.append($list, $input, comma); } diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-column.scss b/wp-dsfr-theme/src/scss/02-tools/_f-column.scss index d488adb..84d1bb8 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-column.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-column.scss @@ -1,5 +1,9 @@ +@use "../01-abstract/variables" as *; +@use "f-strip-units" as *; +@use "f-to-number" as *; @use "sass:map"; @use "sass:math"; +@use "sass:meta"; /** * Column @@ -32,7 +36,7 @@ @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $total-gutter: $total-column; $total-column: $nb-gutter; $nb-gutter: $nb-column; @@ -62,7 +66,7 @@ @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $nb-gutter: $nb-column; $nb-column: $device; $device: d; @@ -89,7 +93,7 @@ @function column-full($device, $nb-column: null, $nb-gutter: null) { // shift vars if $device is number - @if type-of($device) == "number" { + @if meta.type-of($device) == "number" { $nb-gutter: $nb-column; $nb-column: $device; $device: d; @@ -110,5 +114,5 @@ // ---- @function column-factor($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) { - @return math.div(to-number(strip-unit(column($device, $nb-column, $nb-gutter, $total-column, $total-gutter))), 100); + @return math.div(to-number(strip-units(column($device, $nb-column, $nb-gutter, $total-column, $total-gutter))), 100); } diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-context-align.scss b/wp-dsfr-theme/src/scss/02-tools/_f-context-align.scss index 4231d07..a4b357a 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-context-align.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-context-align.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Align * diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-context-selector.scss b/wp-dsfr-theme/src/scss/02-tools/_f-context-selector.scss index d34dcc3..e252c0f 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-context-selector.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-context-selector.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "sass:meta"; + /** * Context selector * @@ -57,9 +60,9 @@ @return $selector; } - @if (type-of($selector) == "string") { + @if (meta.type-of($selector) == "string") { $full-selector: $parent + " " + $selector; - } @else if (type-of($selector) == "list") { + } @else if (meta.type-of($selector) == "list") { @each $s in $selector { $full-selector: $full-selector + $parent + " " + $s; } diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-em.scss b/wp-dsfr-theme/src/scss/02-tools/_f-em.scss index ded3437..ae431f2 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-em.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-em.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; +@use "f-strip-units" as *; @use "sass:math"; /** @@ -8,11 +10,11 @@ @function em($pxval, $base: $font-size-base) { - @if not unitless($pxval) { + @if not math.is-unitless($pxval) { $pxval: strip-units($pxval); } - @if not unitless($base) { + @if not math.is-unitless($base) { $base: strip-units($base); } diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-get-gutter-width.scss b/wp-dsfr-theme/src/scss/02-tools/_f-get-gutter-width.scss index 9b764e2..f080a7d 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-get-gutter-width.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-get-gutter-width.scss @@ -1,3 +1,4 @@ +@use "../01-abstract/variables" as *; @use "sass:map"; /** diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-get-svg-url.scss b/wp-dsfr-theme/src/scss/02-tools/_f-get-svg-url.scss index ca7cb5b..7c9e0b1 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-get-svg-url.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-get-svg-url.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "sass:color"; +@use "sass:list"; @use "sass:map"; /** @@ -18,7 +21,7 @@ "download": ("0 0 24 24","%3Cpath d='M3 19h18v2H3v-2Zm10-5.8L19 7l1.5 1.4L12 17 3.5 8.5 5 7.1l6.1 6V2h2v11.2Z'/%3E") ); - @if not map-has-key($svgs, $name) { + @if not map.has-key($svgs, $name) { @return ""; } @@ -27,8 +30,8 @@ } @if ($fill != "") { - $fill: " fill='rgba(#{red($fill), green($fill), blue($fill), $opacity})'"; + $fill: " fill='rgba(#{color.channel($fill, 'red'), color.channel($fill, 'green'), color.channel($fill, 'blue'), $opacity})'"; } - @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + nth(map.get($svgs, $name), 1) + "'%3E%" + nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */ + @return url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg'" + $fill + $style + " viewBox='" + list.nth(map.get($svgs, $name), 1) + "'%3E%" + list.nth(map.get($svgs, $name), 2) + "%3C/svg%3E"); /* stylelint-disable-line */ } diff --git a/wp-dsfr-theme/src/scss/02-tools/_f-to-number.scss b/wp-dsfr-theme/src/scss/02-tools/_f-to-number.scss index 26a0f48..4c2a938 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_f-to-number.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_f-to-number.scss @@ -1,5 +1,7 @@ +@use "sass:list"; @use "sass:map"; @use "sass:math"; +@use "sass:meta"; @use "sass:string"; /** @@ -8,21 +10,12 @@ * @author: Stackoverflow - https://stackoverflow.com/questions/47630616/scss-arithmetic-operation-with-string * * @param string $value - * - * Examples : - * @for (dollar)i from 1 through 6 { - * &[data-per-line="#{(dollar)i}"] { - * .card { - * width: column(to-number(#{math(dot)div(12, (dollar)i + 1)})); - * } - * } - * } */ @function to-number($value) { - @if type-of($value) == "number" { + @if meta.type-of($value) == "number" { @return $value; - } @else if type-of($value) != "string" { + } @else if meta.type-of($value) != "string" { @error "Value for `to-number` should be a number or a string."; } @@ -31,10 +24,10 @@ $minus: string.slice($value, 1, 1) == "-"; $numbers: ("0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9); - @for $i from if($minus, 2, 1) through str-length($value) { + @for $i from if(sass($minus): 2; else: 1) through string.length($value) { $character: string.slice($value, $i, $i); - @if (index(map-keys($numbers), $character) or $character == ".") { + @if (list.index(map.keys($numbers), $character) or $character == ".") { @if $character == "." { $digits: 1; } @else if $digits == 0 { @@ -46,5 +39,5 @@ } } - @return if($minus, -$result, $result); + @return if(sass($minus): -$result; else: $result); } diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-align.scss b/wp-dsfr-theme/src/scss/02-tools/_m-align.scss index 1d24ffe..a2e8745 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-align.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-align.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Align * diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-bg-fullwidth.scss b/wp-dsfr-theme/src/scss/02-tools/_m-bg-fullwidth.scss index 6d8672c..817e7b3 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-bg-fullwidth.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-bg-fullwidth.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "m-style-only" as *; + /** * Background fullwidth mixin in a container */ diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-block-vertical-spacing.scss b/wp-dsfr-theme/src/scss/02-tools/_m-block-vertical-spacing.scss index bd3e3e3..9e63f70 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-block-vertical-spacing.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-block-vertical-spacing.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "f-context-selector" as *; + /** * Block vertical spacing */ diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-breakpoint.scss b/wp-dsfr-theme/src/scss/02-tools/_m-breakpoint.scss index 4bfec56..3093557 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-breakpoint.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-breakpoint.scss @@ -1,4 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "f-em" as *; @use "sass:map"; +@use "sass:meta"; /** * Breakpoints @@ -19,7 +22,7 @@ @mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { @media screen and (min-width: em(map.get($breakpoints, $breakpoint), $font-size)) and (max-width: em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) { @content; diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-checkbox-custom.scss b/wp-dsfr-theme/src/scss/02-tools/_m-checkbox-custom.scss index 64a98a2..5b4437a 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-checkbox-custom.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-checkbox-custom.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; +@use "m-sr-only" as *; @use "sass:math"; /** diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-container-query.scss b/wp-dsfr-theme/src/scss/02-tools/_m-container-query.scss index 16b47c7..5853f29 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-container-query.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-container-query.scss @@ -1,4 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "f-em" as *; @use "sass:map"; +@use "sass:meta"; /** * Container Query @@ -19,7 +22,7 @@ @mixin container-query($breakpoint, $min-or-max-or-breakpoint: min, $container-name: "") { $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified - @if (type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { + @if (meta.type-of(map.get($breakpoints, $min-or-max-or-breakpoint)) == "number") { @container #{$container-name} (min-width: #{em(map.get($breakpoints, $breakpoint), $font-size)}) and (max-width: #{em(map.get($breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)}) { diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-container.scss b/wp-dsfr-theme/src/scss/02-tools/_m-container.scss index d8d9fd8..4742154 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-container.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-container.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Container */ diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-editor-only.scss b/wp-dsfr-theme/src/scss/02-tools/_m-editor-only.scss index e4a6cec..2b80839 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-editor-only.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-editor-only.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Editor style only * diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-fr-btn.scss b/wp-dsfr-theme/src/scss/02-tools/_m-fr-btn.scss index b366bad..6404dac 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-fr-btn.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-fr-btn.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Button */ diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-fr-link.scss b/wp-dsfr-theme/src/scss/02-tools/_m-fr-link.scss index 84a669c..2147bad 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-fr-link.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-fr-link.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "f-get-svg-url" as *; +@use "m-hover" as *; + @mixin fr-link { --underline-img: linear-gradient(0deg, currentColor, currentColor); --text-spacing: 0; diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-heading.scss b/wp-dsfr-theme/src/scss/02-tools/_m-heading.scss index 59e99e1..d9a2c27 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-heading.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-heading.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Heading mixins */ diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-not-acf.scss b/wp-dsfr-theme/src/scss/02-tools/_m-not-acf.scss index f13e967..bcf9976 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-not-acf.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-not-acf.scss @@ -1,3 +1,5 @@ +@use "f-context-selector" as *; + // Not apply style to ACF fields @mixin not-acf() { #{context-selector(":where(body)", ":where(*:not([class*="acf-"])) >")} { diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-radio-custom.scss b/wp-dsfr-theme/src/scss/02-tools/_m-radio-custom.scss index 28e39e4..ab59fb2 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-radio-custom.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-radio-custom.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; +@use "m-checkbox-custom" as *; @use "sass:math"; /** diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-scrollbar.scss b/wp-dsfr-theme/src/scss/02-tools/_m-scrollbar.scss index 4bde04c..314710f 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-scrollbar.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-scrollbar.scss @@ -1,3 +1,5 @@ +@use "m-hover" as *; + /** * Scrollbar invisible * diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-select-custom.scss b/wp-dsfr-theme/src/scss/02-tools/_m-select-custom.scss index ad681e9..ad73a46 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-select-custom.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-select-custom.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; +@use "f-get-svg-url" as *; @use "sass:color"; /** diff --git a/wp-dsfr-theme/src/scss/02-tools/_m-style-only.scss b/wp-dsfr-theme/src/scss/02-tools/_m-style-only.scss index 1ff114f..c9cf373 100644 --- a/wp-dsfr-theme/src/scss/02-tools/_m-style-only.scss +++ b/wp-dsfr-theme/src/scss/02-tools/_m-style-only.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + /** * Style only * diff --git a/wp-dsfr-theme/src/scss/03-base/_print.scss b/wp-dsfr-theme/src/scss/03-base/_print.scss index 97bf5b2..f705fde 100644 --- a/wp-dsfr-theme/src/scss/03-base/_print.scss +++ b/wp-dsfr-theme/src/scss/03-base/_print.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + @media print { * { font-family: Arial, Helvetica, sans-serif !important; diff --git a/wp-dsfr-theme/src/scss/03-base/_reset.scss b/wp-dsfr-theme/src/scss/03-base/_reset.scss index 9448c1f..4fee488 100644 --- a/wp-dsfr-theme/src/scss/03-base/_reset.scss +++ b/wp-dsfr-theme/src/scss/03-base/_reset.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + html { // Scroll resets -webkit-overflow-scrolling: touch; diff --git a/wp-dsfr-theme/src/scss/03-base/_text.scss b/wp-dsfr-theme/src/scss/03-base/_text.scss index 7ee5775..8809b84 100644 --- a/wp-dsfr-theme/src/scss/03-base/_text.scss +++ b/wp-dsfr-theme/src/scss/03-base/_text.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "../06-blocks/core/paragraph" as *; + %figcaption { @extend %text-xs; diff --git a/wp-dsfr-theme/src/scss/03-base/_variables-css.scss b/wp-dsfr-theme/src/scss/03-base/_variables-css.scss index a18f07a..5e32f23 100644 --- a/wp-dsfr-theme/src/scss/03-base/_variables-css.scss +++ b/wp-dsfr-theme/src/scss/03-base/_variables-css.scss @@ -1,3 +1,8 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/f-column" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-reduced-motion" as *; + :root { /* * Heading diff --git a/wp-dsfr-theme/src/scss/04-utilities/_wp-admin-bar.scss b/wp-dsfr-theme/src/scss/04-utilities/_wp-admin-bar.scss index b09db67..3062aa9 100644 --- a/wp-dsfr-theme/src/scss/04-utilities/_wp-admin-bar.scss +++ b/wp-dsfr-theme/src/scss/04-utilities/_wp-admin-bar.scss @@ -1,3 +1,5 @@ +@use "../02-tools/m-breakpoint" as *; + #wpadminbar { @include breakpoints(sm, max) { overflow: scroll; diff --git a/wp-dsfr-theme/src/scss/05-components/_fr-accordions-group.scss b/wp-dsfr-theme/src/scss/05-components/_fr-accordions-group.scss index f98422b..1ec9a64 100644 --- a/wp-dsfr-theme/src/scss/05-components/_fr-accordions-group.scss +++ b/wp-dsfr-theme/src/scss/05-components/_fr-accordions-group.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + .fr-accordions-group { margin-bottom: $text-spacing; } diff --git a/wp-dsfr-theme/src/scss/05-components/_fr-btn.scss b/wp-dsfr-theme/src/scss/05-components/_fr-btn.scss index e2fcaeb..2a67fd2 100644 --- a/wp-dsfr-theme/src/scss/05-components/_fr-btn.scss +++ b/wp-dsfr-theme/src/scss/05-components/_fr-btn.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/m-fr-btn" as *; + %fr-btn { @include fr-btn; } diff --git a/wp-dsfr-theme/src/scss/05-components/_fr-link.scss b/wp-dsfr-theme/src/scss/05-components/_fr-link.scss index 9e2a0c3..6db488c 100644 --- a/wp-dsfr-theme/src/scss/05-components/_fr-link.scss +++ b/wp-dsfr-theme/src/scss/05-components/_fr-link.scss @@ -1,3 +1,6 @@ +@use "../02-tools/f-get-svg-url" as *; +@use "../02-tools/m-fr-link" as *; + %fr-link { @include fr-link; } diff --git a/wp-dsfr-theme/src/scss/05-components/_fr-pagination.scss b/wp-dsfr-theme/src/scss/05-components/_fr-pagination.scss index 787c4e2..38c36fd 100644 --- a/wp-dsfr-theme/src/scss/05-components/_fr-pagination.scss +++ b/wp-dsfr-theme/src/scss/05-components/_fr-pagination.scss @@ -1,3 +1,5 @@ +@use "../01-abstract/variables" as *; + .fr-pagination { $el: &; diff --git a/wp-dsfr-theme/src/scss/05-components/_fr-quote.scss b/wp-dsfr-theme/src/scss/05-components/_fr-quote.scss index ac84872..d323ff1 100644 --- a/wp-dsfr-theme/src/scss/05-components/_fr-quote.scss +++ b/wp-dsfr-theme/src/scss/05-components/_fr-quote.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../06-blocks/block-spacings" as *; + .fr-quote { $el: &; diff --git a/wp-dsfr-theme/src/scss/05-components/_fr-tabs.scss b/wp-dsfr-theme/src/scss/05-components/_fr-tabs.scss index a4b94cf..c3a4efe 100644 --- a/wp-dsfr-theme/src/scss/05-components/_fr-tabs.scss +++ b/wp-dsfr-theme/src/scss/05-components/_fr-tabs.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "../06-blocks/block-spacings" as *; + .fr-tabs { margin-bottom: $text-spacing; diff --git a/wp-dsfr-theme/src/scss/06-blocks/_block-spacings.scss b/wp-dsfr-theme/src/scss/06-blocks/_block-spacings.scss new file mode 100644 index 0000000..bfa1ddf --- /dev/null +++ b/wp-dsfr-theme/src/scss/06-blocks/_block-spacings.scss @@ -0,0 +1,64 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/m-breakpoint" as *; + +%no-first-and-last-child-vertical-margin { + :first-child:where(:not(:is([class*="fr-"] :first-child))) { + margin-top: 0; + } + + :last-child:where(:not(:is([class*="fr-"] :last-child))) { + margin-bottom: 0; + } +} + +%block-spacing-xs { + margin-bottom: $spacing-6; +} + +%block-spacing-sm { + margin-top: $spacing-6; + margin-bottom: $spacing-6; + + @include breakpoints(md) { + margin-top: $spacing-8; + margin-bottom: $spacing-8; + } +} + +%block-spacing-md { + margin-top: $spacing-10; + margin-bottom: $spacing-10; + + @include breakpoints(md) { + margin-top: $spacing-12; + margin-bottom: $spacing-12; + } +} + +%block-inner-spacing-md { + padding-top: $spacing-10; + padding-bottom: $spacing-10; + + @include breakpoints(md) { + padding-top: $spacing-12; + padding-bottom: $spacing-12; + } +} + +%block-spacing-lg { + margin-top: $spacing-12; + margin-bottom: $spacing-12; + + @include breakpoints(md) { + margin-top: $spacing-14; + margin-bottom: $spacing-14; + } +} + +%block-spacing-lg-reverse { + margin-top: -$spacing-12; + + @include breakpoints(md) { + margin-top: -$spacing-14; + } +} diff --git a/wp-dsfr-theme/src/scss/06-blocks/_gutenberg.scss b/wp-dsfr-theme/src/scss/06-blocks/_gutenberg.scss index efe1e5f..b4d4887 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/_gutenberg.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/_gutenberg.scss @@ -1,3 +1,10 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/f-context-selector" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-editor-only" as *; +@use "../02-tools/m-heading" as *; +@use "../03-base/text" as *; + @include editor-only { // ---- // Post title style @@ -55,68 +62,3 @@ margin-bottom: 0 !important; } } - -// ---- -// Alignements verticaux -// ---- -%no-first-and-last-child-vertical-margin { - :first-child:where(:not(:is([class*="fr-"] :first-child))) { - margin-top: 0; - } - - :last-child:where(:not(:is([class*="fr-"] :last-child))) { - margin-bottom: 0; - } -} - -%block-spacing-xs { - margin-bottom: $spacing-6; -} - -%block-spacing-sm { - margin-top: $spacing-6; - margin-bottom: $spacing-6; - - @include breakpoints(md) { - margin-top: $spacing-8; - margin-bottom: $spacing-8; - } -} - -%block-spacing-md { - margin-top: $spacing-10; - margin-bottom: $spacing-10; - - @include breakpoints(md) { - margin-top: $spacing-12; - margin-bottom: $spacing-12; - } -} - -%block-inner-spacing-md { - padding-top: $spacing-10; - padding-bottom: $spacing-10; - - @include breakpoints(md) { - padding-top: $spacing-12; - padding-bottom: $spacing-12; - } -} - -%block-spacing-lg { - margin-top: $spacing-12; - margin-bottom: $spacing-12; - - @include breakpoints(md) { - margin-top: $spacing-14; - margin-bottom: $spacing-14; - } -} - -%block-spacing-lg-reverse { - margin-top: -$spacing-12; - - @include breakpoints(md) { - margin-top: -$spacing-14; - } -} diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_audio.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_audio.scss index 0f0cdac..a08d93d 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_audio.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_audio.scss @@ -1,3 +1,5 @@ +@use "../block-spacings" as *; + .wp-block-audio { @extend %block-spacing-xs; } diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_buttons.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_buttons.scss index 5d945c2..a312a60 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_buttons.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_buttons.scss @@ -1,3 +1,7 @@ +@use "../../01-abstract/variables" as *; +@use "../../05-components/fr-btn" as *; +@use "../../05-components/fr-link" as *; + .wp-block { &-buttons { gap: 16px; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_columns.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_columns.scss index 5a3ba0a..0e4ddc0 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_columns.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_columns.scss @@ -1,3 +1,7 @@ +@use "../../02-tools/f-context-selector" as *; +@use "../../02-tools/m-breakpoint" as *; +@use "../block-spacings" as *; + .wp-block-columns { gap: var(--row-gap) var(--column-gap); diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_cover.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_cover.scss index 2e9d0dd..0b392de 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_cover.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_cover.scss @@ -1,3 +1,10 @@ +@use "../../01-abstract/variables" as *; +@use "../../02-tools/f-column" as *; +@use "../../02-tools/f-context-selector" as *; +@use "../../02-tools/m-breakpoint" as *; +@use "../../02-tools/m-container" as *; +@use "../block-spacings" as *; + .wp-block-cover { $el: &; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_embed.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_embed.scss index 1f15bad..7760c13 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_embed.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_embed.scss @@ -1,3 +1,6 @@ +@use "../../02-tools/f-context-selector" as *; +@use "../block-spacings" as *; + .wp-block-embed { @extend %block-spacing-sm; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_file.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_file.scss index 0ad4c82..c1d1136 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_file.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_file.scss @@ -1,3 +1,8 @@ +@use "../../02-tools/m-editor-only" as *; +@use "../../02-tools/m-fr-link" as *; +@use "../../05-components/fr-link" as *; +@use "../block-spacings" as *; + .wp-block-file { $el: &; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_gallery.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_gallery.scss index 0252e60..718ff5e 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_gallery.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_gallery.scss @@ -1,3 +1,6 @@ +@use "../../02-tools/f-context-selector" as *; +@use "../block-spacings" as *; + .wp-block-gallery { --wp--style--unstable-gallery-gap: var(--column-gap) !important; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_group.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_group.scss index d489579..5171335 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_group.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_group.scss @@ -1,3 +1,9 @@ +@use "../../01-abstract/variables" as *; +@use "../../02-tools/f-context-selector" as *; +@use "../../02-tools/m-breakpoint" as *; +@use "../../02-tools/m-container" as *; +@use "../block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_heading.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_heading.scss index 58534d8..6e5b0a2 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_heading.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_heading.scss @@ -1,3 +1,5 @@ +@use "../../01-abstract/variables" as *; + /** * Headings */ diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_html.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_html.scss index 0f59f73..261d041 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_html.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_html.scss @@ -1,3 +1,5 @@ +@use "../../02-tools/m-editor-only" as *; + @include editor-only { [data-type="core/html"] textarea { // style diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_image.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_image.scss index e49d8e5..990b5ae 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_image.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_image.scss @@ -1,3 +1,6 @@ +@use "../../02-tools/f-context-selector" as *; +@use "../block-spacings" as *; + .wp-block-image { @extend %block-spacing-sm; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_list.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_list.scss index 0a9fd5d..3d3dbf6 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_list.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_list.scss @@ -1,3 +1,6 @@ +@use "../../01-abstract/variables" as *; +@use "../../02-tools/f-context-selector" as *; + #{context-selector('.blocks-container', '.is-root-container')} { ul:where(:not([class*="fr-"])), ol:where(:not([class*="fr-"])) { diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_media-text.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_media-text.scss index 7e4f19a..6ca1fd5 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_media-text.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_media-text.scss @@ -1,3 +1,10 @@ +@use "../../01-abstract/variables" as *; +@use "../../02-tools/f-column" as *; +@use "../../02-tools/f-context-selector" as *; +@use "../../02-tools/m-breakpoint" as *; +@use "../../02-tools/m-editor-only" as *; +@use "../block-spacings" as *; + .wp-block-media-text { $el: &; $vertical-padding: calc(var(--column-gap) / 2); diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_paragraph.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_paragraph.scss index e045ffa..e48deb4 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_paragraph.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_paragraph.scss @@ -1,3 +1,5 @@ +@use "../../01-abstract/variables" as *; + /** * Paragraph */ diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_table.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_table.scss index a06fc74..b27f499 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_table.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_table.scss @@ -1,3 +1,8 @@ +@use "../../01-abstract/variables" as *; +@use "../../02-tools/m-style-only" as *; +@use "../block-spacings" as *; +@use "paragraph" as *; + .wp-block-table { @extend %block-spacing-sm; diff --git a/wp-dsfr-theme/src/scss/06-blocks/core/_video.scss b/wp-dsfr-theme/src/scss/06-blocks/core/_video.scss index aee30fa..78fddf2 100644 --- a/wp-dsfr-theme/src/scss/06-blocks/core/_video.scss +++ b/wp-dsfr-theme/src/scss/06-blocks/core/_video.scss @@ -1,3 +1,6 @@ +@use "../../02-tools/f-context-selector" as *; +@use "../block-spacings" as *; + .wp-block-video { @extend %block-spacing-sm; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--arguments.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--arguments.scss index 3b2a12f..82f9f60 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--arguments.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--arguments.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "../06-blocks/block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--hero.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--hero.scss index 8839759..7c30b97 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--hero.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--hero.scss @@ -1,3 +1,9 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/f-context-selector" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-style-only" as *; +@use "../06-blocks/block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--how-to-use.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--how-to-use.scss index 716ec84..0177a67 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--how-to-use.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group--how-to-use.scss @@ -1,3 +1,6 @@ +@use "../02-tools/m-style-only" as *; +@use "../06-blocks/block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-alert.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-alert.scss index b90a025..ed728bf 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-alert.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-alert.scss @@ -1,3 +1,5 @@ +@use "../06-blocks/block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-callout.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-callout.scss index 57c91ca..b92a056 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-callout.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-callout.scss @@ -1,3 +1,5 @@ +@use "../06-blocks/block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-highlight.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-highlight.scss index 62df5aa..b114d17 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-highlight.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-group-fr-highlight.scss @@ -1,3 +1,6 @@ +@use "../02-tools/f-context-selector" as *; +@use "../06-blocks/block-spacings" as *; + .wp-block-group { $el: &; diff --git a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-media-text--description.scss b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-media-text--description.scss index 7f8c443..46f456c 100644 --- a/wp-dsfr-theme/src/scss/07-patterns/_wp-block-media-text--description.scss +++ b/wp-dsfr-theme/src/scss/07-patterns/_wp-block-media-text--description.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/m-breakpoint" as *; + .wp-block-media-text { $el: &; diff --git a/wp-dsfr-theme/src/scss/08-template-parts/_grid.scss b/wp-dsfr-theme/src/scss/08-template-parts/_grid.scss index a6a3a07..491ffe5 100644 --- a/wp-dsfr-theme/src/scss/08-template-parts/_grid.scss +++ b/wp-dsfr-theme/src/scss/08-template-parts/_grid.scss @@ -1,3 +1,6 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/m-breakpoint" as *; + .grid { display: grid; grid-template-columns: 1fr; diff --git a/wp-dsfr-theme/src/scss/08-template-parts/_hero.scss b/wp-dsfr-theme/src/scss/08-template-parts/_hero.scss index ceb37b0..4714be1 100644 --- a/wp-dsfr-theme/src/scss/08-template-parts/_hero.scss +++ b/wp-dsfr-theme/src/scss/08-template-parts/_hero.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/f-column" as *; +@use "../02-tools/m-breakpoint" as *; + .hero { $el: &; diff --git a/wp-dsfr-theme/src/scss/08-template-parts/_latest-posts.scss b/wp-dsfr-theme/src/scss/08-template-parts/_latest-posts.scss index 4e1818c..635d08e 100644 --- a/wp-dsfr-theme/src/scss/08-template-parts/_latest-posts.scss +++ b/wp-dsfr-theme/src/scss/08-template-parts/_latest-posts.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/f-column" as *; +@use "../02-tools/m-breakpoint" as *; + .latest-posts { padding-top: 56px; padding-bottom: 56px; diff --git a/wp-dsfr-theme/src/scss/08-template-parts/_page-top.scss b/wp-dsfr-theme/src/scss/08-template-parts/_page-top.scss index d69a148..706be9d 100644 --- a/wp-dsfr-theme/src/scss/08-template-parts/_page-top.scss +++ b/wp-dsfr-theme/src/scss/08-template-parts/_page-top.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/m-breakpoint" as *; +@use "../02-tools/m-container" as *; + .page-top { > div { @include container; diff --git a/wp-dsfr-theme/src/scss/09-templates/_search.scss b/wp-dsfr-theme/src/scss/09-templates/_search.scss index e175a8b..4b1e1b4 100644 --- a/wp-dsfr-theme/src/scss/09-templates/_search.scss +++ b/wp-dsfr-theme/src/scss/09-templates/_search.scss @@ -1,3 +1,7 @@ +@use "../01-abstract/variables" as *; +@use "../02-tools/f-column" as *; +@use "../02-tools/m-breakpoint" as *; + /* Search Page -------------------------------------------------------------- */ .search { diff --git a/wp-dsfr-theme/src/scss/editor.scss b/wp-dsfr-theme/src/scss/editor.scss index 98581da..e444bbb 100644 --- a/wp-dsfr-theme/src/scss/editor.scss +++ b/wp-dsfr-theme/src/scss/editor.scss @@ -1,67 +1,87 @@ -$entry-file-name: "editor"; - /** * Abstract * == Contain SCSS and CSS variables and webfonts declarations. */ -@import "./01-abstract/abstract"; - -/** - * Tools - * == Contains functions and mixins. - */ +@use "01-abstract/constants"; +@use "01-abstract/variables"; -@import "./02-tools/tools"; +variables.$entry-file-name: "editor"; /** * Base * == Contain generic styles such as normalize or reset. */ -@import "./03-base/variables-css"; -@import "./03-base/svg-icons"; -@import "./03-base/text"; - -/** - * Utilities - * == Utility classes that are not assigned to a specific component. - */ - -// @import "./04-utilities/utilities"; +@use "03-base/variables-css"; +@use "03-base/svg-icons"; +@use "06-blocks/core/paragraph"; +@use "03-base/text"; /** * Blocks * == Gutenberg core blocks styles, style for front-end layout and editor. */ -@import "./05-components/components"; +@use "06-blocks/block-spacings"; +@use "05-components/fr-btn"; +@use "05-components/fr-link"; +@use "05-components/fr-accordion"; +@use "05-components/fr-accordions-group"; +@use "05-components/fr-callout"; +@use "05-components/fr-card"; +@use "05-components/fr-highlight"; +@use "05-components/fr-pagination"; +@use "05-components/fr-quote"; +@use "05-components/fr-ratio"; +@use "05-components/fr-tabs"; /** * Gutenberg * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor. */ -@import "./06-blocks/gutenberg"; -@import "./06-blocks/blocks"; +@use "06-blocks/gutenberg"; +@use "06-blocks/core/audio"; +@use "06-blocks/core/buttons"; +@use "06-blocks/core/columns"; +@use "06-blocks/core/cover"; +@use "06-blocks/core/embed"; +@use "06-blocks/core/file"; +@use "06-blocks/core/gallery"; +@use "06-blocks/core/group"; +@use "06-blocks/core/heading"; +@use "06-blocks/core/html"; +@use "06-blocks/core/image"; +@use "06-blocks/core/list"; +@use "06-blocks/core/media-text"; +@use "06-blocks/core/separator"; +@use "06-blocks/core/table"; +@use "06-blocks/core/video"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@import "./07-patterns/patterns"; +@use "07-patterns/wp-block-group--arguments"; +@use "07-patterns/wp-block-group--hero"; +@use "07-patterns/wp-block-group--how-to-use"; +@use "07-patterns/wp-block-group-fr-alert"; +@use "07-patterns/wp-block-group-fr-callout"; +@use "07-patterns/wp-block-group-fr-highlight"; +@use "07-patterns/wp-block-media-text--description"; /** * Template parts * == If you want to add custom styles for specific page templates parts. */ -@import "./08-template-parts/grid"; +@use "08-template-parts/grid"; /** * Vendor * == Plugins or libraries custom styles. */ -// @import "./10-vendor/vendor"; +// @use "10-vendor/..."; diff --git a/wp-dsfr-theme/src/scss/login.scss b/wp-dsfr-theme/src/scss/login.scss index 9967f8f..41e9155 100644 --- a/wp-dsfr-theme/src/scss/login.scss +++ b/wp-dsfr-theme/src/scss/login.scss @@ -2,8 +2,7 @@ * Imports */ -@import "./01-abstract/abstract"; -@import "./02-tools/tools"; +@use "02-tools/m-fr-btn" as *; // SCSS variables to customise the login page styles // The CSS file generated in dist/ by webpack is called automatically thanks to the WP Login Page mu-plugin present in the WP Skeleton. diff --git a/wp-dsfr-theme/src/scss/style.scss b/wp-dsfr-theme/src/scss/style.scss index 8801210..36b9540 100644 --- a/wp-dsfr-theme/src/scss/style.scss +++ b/wp-dsfr-theme/src/scss/style.scss @@ -1,72 +1,109 @@ -$entry-file-name: "style"; - /** * Abstract * == Contain SCSS and CSS variables and webfonts declarations. */ -@import "./01-abstract/abstract"; - -/** - * Tools - * == Contains functions and mixins. - */ +@use "01-abstract/constants"; +@use "01-abstract/variables"; -@import "./02-tools/tools"; +variables.$entry-file-name: "style"; /** * Base * == Contain generic styles such as normalize or reset. */ -@import "./03-base/base"; +@use "03-base/variables-css"; +@use "03-base/reset"; +@use "03-base/svg-icons"; +@use "03-base/media"; +@use "03-base/print"; +@use "06-blocks/core/paragraph"; +@use "03-base/text"; /** * Utilities * == Utility classes that are not assigned to a specific component. */ -@import "./04-utilities/utilities"; +@use "04-utilities/wp-admin-bar"; +@use "04-utilities/seo"; +@use "04-utilities/palette"; /** * Components * == Contain any default component. Just give the components some basic styles. */ -@import "./05-components/components"; +@use "06-blocks/block-spacings"; +@use "05-components/fr-btn"; +@use "05-components/fr-link"; +@use "05-components/fr-accordion"; +@use "05-components/fr-accordions-group"; +@use "05-components/fr-callout"; +@use "05-components/fr-card"; +@use "05-components/fr-highlight"; +@use "05-components/fr-pagination"; +@use "05-components/fr-quote"; +@use "05-components/fr-ratio"; +@use "05-components/fr-tabs"; /** * Gutenberg * == Gutenberg core/custom blocks and patterns styles, style for front-end layout and editor. */ -@import "./06-blocks/gutenberg"; -@import "./06-blocks/blocks"; +@use "06-blocks/gutenberg"; +@use "06-blocks/core/audio"; +@use "06-blocks/core/buttons"; +@use "06-blocks/core/columns"; +@use "06-blocks/core/cover"; +@use "06-blocks/core/embed"; +@use "06-blocks/core/file"; +@use "06-blocks/core/gallery"; +@use "06-blocks/core/group"; +@use "06-blocks/core/heading"; +@use "06-blocks/core/html"; +@use "06-blocks/core/image"; +@use "06-blocks/core/list"; +@use "06-blocks/core/media-text"; +@use "06-blocks/core/separator"; +@use "06-blocks/core/table"; +@use "06-blocks/core/video"; /** * Patterns * == Contains styles for gutenberg patterns. */ -@import "./07-patterns/patterns"; +@use "07-patterns/wp-block-group--arguments"; +@use "07-patterns/wp-block-group--hero"; +@use "07-patterns/wp-block-group--how-to-use"; +@use "07-patterns/wp-block-group-fr-alert"; +@use "07-patterns/wp-block-group-fr-callout"; +@use "07-patterns/wp-block-group-fr-highlight"; +@use "07-patterns/wp-block-media-text--description"; /** * Template parts * == If you want to add custom styles for specific page templates parts. */ -@import "./08-template-parts/template-parts"; +@use "08-template-parts/grid"; +@use "08-template-parts/hero"; +@use "08-template-parts/latest-posts"; +@use "08-template-parts/page-top"; /** * Pages * == If you want to add custom styles for specific page templates. */ -@import "./09-templates/templates"; +@use "09-templates/search"; /** * Vendor * == Plugins or libraries custom styles. */ -// @import "./10-vendor/vendor"; +// @use "10-vendor/...";