Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add initial accordion implementation.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| { | ||
| "$schema": "https://schemas.wp.org/trunk/block.json", | ||
| "apiVersion": 3, | ||
| "name": "core/accordion-content", | ||
| "version": "0.1.0", | ||
| "title": "Content", | ||
| "category": "design", | ||
| "description": "Accordion item content", | ||
| "example": {}, | ||
| "parent": [ "core/accordion-item" ], | ||
| "supports": { | ||
| "color": { | ||
| "background": true, | ||
| "gradient": true | ||
| }, | ||
| "border": true, | ||
| "interactivity": true, | ||
| "spacing": { | ||
| "padding": true, | ||
| "margin": [ "top", "bottom" ], | ||
| "blockGap": true, | ||
| "__experimentalDefaultControls": { | ||
| "padding": true, | ||
| "blockGap": true | ||
| } | ||
| }, | ||
| "__experimentalBorder": { | ||
| "color": true, | ||
| "radius": true, | ||
| "style": true, | ||
| "width": true, | ||
| "__experimentalDefaultControls": { | ||
| "color": true, | ||
| "radius": true, | ||
| "style": true, | ||
| "width": true | ||
| } | ||
| }, | ||
| "typography": { | ||
| "fontSize": true, | ||
| "lineHeight": true, | ||
| "__experimentalFontFamily": true, | ||
| "__experimentalFontWeight": true, | ||
| "__experimentalFontStyle": true, | ||
| "__experimentalTextTransform": true, | ||
| "__experimentalTextDecoration": true, | ||
| "__experimentalLetterSpacing": true, | ||
| "__experimentalDefaultControls": { | ||
| "fontSize": true | ||
| } | ||
| }, | ||
| "shadow": true, | ||
| "layout": true | ||
| }, | ||
| "attributes": { | ||
| "allowedBlocks": { | ||
| "type": "array" | ||
| }, | ||
| "templateLock": { | ||
| "type": [ "string", "boolean" ], | ||
| "enum": [ "all", "insert", "contentOnly", false ], | ||
| "default": false | ||
| }, | ||
| "openByDefault": { | ||
| "type": "boolean", | ||
| "default": false | ||
| }, | ||
| "isSelected": { | ||
| "type": "boolean", | ||
| "default": false | ||
| } | ||
| }, | ||
| "textdomain": "default" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| useBlockProps, | ||
| useInnerBlocksProps, | ||
| __experimentalUseBorderProps as useBorderProps, | ||
| __experimentalUseColorProps as useColorProps, | ||
| __experimentalGetSpacingClassesAndStyles as useSpacingProps, | ||
| __experimentalGetShadowClassesAndStyles as useShadowProps, | ||
| } from '@wordpress/block-editor'; | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import clsx from 'clsx'; | ||
|
|
||
| export default function Edit( { attributes } ) { | ||
| const { allowedBlocks, templateLock, openByDefault, isSelected } = | ||
| attributes; | ||
| const borderProps = useBorderProps( attributes ); | ||
| const colorProps = useColorProps( attributes ); | ||
| const spacingProps = useSpacingProps( attributes ); | ||
| const shadowProps = useShadowProps( attributes ); | ||
|
|
||
| const blockProps = useBlockProps(); | ||
| const innerBlocksProps = useInnerBlocksProps( | ||
| { | ||
| className: 'accordion-content__wrapper', | ||
| style: { | ||
| ...spacingProps.style, | ||
| }, | ||
| }, | ||
| { | ||
| allowedBlocks, | ||
| template: [ [ 'core/paragraph', {} ] ], | ||
| templateLock, | ||
| } | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| { ...blockProps } | ||
| className={ clsx( | ||
| blockProps.className, | ||
| colorProps.className, | ||
| borderProps.className, | ||
| { | ||
| [ `has-custom-font-size` ]: blockProps?.style?.fontSize, | ||
| } | ||
| ) } | ||
| style={ { | ||
| ...borderProps.style, | ||
| ...colorProps.style, | ||
| ...shadowProps.style, | ||
| } } | ||
| aria-hidden={ ! isSelected && ! openByDefault } | ||
| > | ||
| <div { ...innerBlocksProps } /> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { SVG, Path } from '@wordpress/components'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Edit from './edit'; | ||
| import save from './save'; | ||
| import metadata from './block.json'; | ||
| import initBlock from '../utils/init-block'; | ||
|
|
||
| const icon = ( | ||
| <SVG | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <Path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M8.10417 6.00024H6.5C5.39543 6.00024 4.5 6.89567 4.5 8.00024V10.3336H6V8.00024C6 7.7241 6.22386 7.50024 6.5 7.50024H8.10417V6.00024ZM4.5 13.6669V16.0002C4.5 17.1048 5.39543 18.0002 6.5 18.0002H8.10417V16.5002H6.5C6.22386 16.5002 6 16.2764 6 16.0002V13.6669H4.5ZM10.3958 6.00024V7.50024H13.6042V6.00024H10.3958ZM15.8958 6.00024V7.50024H17.5C17.7761 7.50024 18 7.7241 18 8.00024V10.3336H19.5V8.00024C19.5 6.89567 18.6046 6.00024 17.5 6.00024H15.8958ZM19.5 13.6669H18V16.0002C18 16.2764 17.7761 16.5002 17.5 16.5002H15.8958V18.0002H17.5C18.6046 18.0002 19.5 17.1048 19.5 16.0002V13.6669ZM13.6042 18.0002V16.5002H10.3958V18.0002H13.6042Z" | ||
| fill="currentColor" | ||
| /> | ||
| </SVG> | ||
| ); | ||
|
|
||
| const { name } = metadata; | ||
|
|
||
| export { metadata, name }; | ||
|
|
||
| export const settings = { | ||
| icon, | ||
| example: {}, | ||
| Edit, | ||
| save, | ||
| }; | ||
|
|
||
| export const init = () => initBlock( { name, metadata, settings } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { init } from './'; | ||
|
|
||
| export default init(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| InnerBlocks, | ||
| useBlockProps, | ||
| __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, | ||
| __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, | ||
| __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, | ||
| __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, | ||
| } from '@wordpress/block-editor'; | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import clsx from 'clsx'; | ||
|
|
||
| export default function save( { attributes } ) { | ||
| const blockProps = useBlockProps.save(); | ||
| const borderProps = getBorderClassesAndStyles( attributes ); | ||
| const colorProps = getColorClassesAndStyles( attributes ); | ||
| const spacingProps = getSpacingClassesAndStyles( attributes ); | ||
| const shadowProps = getShadowClassesAndStyles( attributes ); | ||
|
|
||
| return ( | ||
| <div | ||
| { ...blockProps } | ||
| className={ clsx( | ||
| blockProps.className, | ||
| colorProps.className, | ||
| borderProps.className, | ||
| { | ||
| [ `has-custom-font-size` ]: blockProps?.style?.fontSize, | ||
| } | ||
| ) } | ||
| style={ { | ||
| ...borderProps.style, | ||
| ...colorProps.style, | ||
| ...shadowProps.style, | ||
| } } | ||
| > | ||
| <div | ||
| className="accordion-content__wrapper" | ||
| style={ { | ||
| ...spacingProps.style, | ||
| } } | ||
| > | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.