-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from bigbite/feature/BBT-76-schema-ui
[BBT-76] Schema UI - Border Component
- Loading branch information
Showing
34 changed files
with
653 additions
and
582 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { __ } from '@wordpress/i18n'; | ||
import { useState, useContext } from '@wordpress/element'; | ||
|
||
import Search from './Search'; | ||
import BlocksItem from './BlocksItem'; | ||
import EditorContext from '../context/EditorContext'; | ||
import { getCoreBlocks } from '../../utils/block-helpers'; | ||
|
||
/** | ||
* Blocks tab menu component | ||
*/ | ||
const Blocks = () => { | ||
const { themeConfig, schema } = useContext( EditorContext ); | ||
const [ searchValue, setSearchValue ] = useState(); | ||
|
||
return ( | ||
<section className="themer--blocks-component"> | ||
<h2>{ __( 'Blocks', 'themer' ) }</h2> | ||
<p> | ||
{ __( | ||
'Customise the appearance of specific blocks for the whole site.', | ||
'themer' | ||
) } | ||
</p> | ||
<Search setValue={ setSearchValue } /> | ||
{ getCoreBlocks( undefined, themeConfig, schema )?.map( | ||
( block ) => { | ||
if ( | ||
searchValue?.length > 0 && | ||
! block.toLowerCase().includes( searchValue ) | ||
) { | ||
return false; | ||
} | ||
|
||
return ( | ||
<BlocksItem | ||
key={ block } | ||
block={ block } | ||
themeConfig={ themeConfig } | ||
/> | ||
); | ||
} | ||
) } | ||
</section> | ||
); | ||
}; | ||
|
||
export default Blocks; |
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,36 @@ | ||
import Border from './StylesBorder'; | ||
import getThemeOption from '../../utils/get-theme-option'; | ||
|
||
/** | ||
* Individual block item | ||
* | ||
* @param {Object} props Component props | ||
* @param {string} props.block Block name | ||
* @param {Object} props.themeConfig Theme JSON | ||
*/ | ||
const BlocksItem = ( { block, themeConfig } ) => { | ||
if ( ! block ) { | ||
return; | ||
} | ||
|
||
const blockSelector = [ 'styles', 'blocks', block ]; | ||
const hasBorderStyles = getThemeOption( | ||
[ ...blockSelector, 'border' ].join( '.' ), | ||
themeConfig | ||
); | ||
|
||
return ( | ||
<details className="themer--blocks-item-component"> | ||
<summary>{ block }</summary> | ||
<div className="themer--blocks-item-component--styles"> | ||
{ hasBorderStyles && ( | ||
<Border | ||
selector={ [ ...blockSelector, 'border' ].join( '.' ) } | ||
/> | ||
) } | ||
</div> | ||
</details> | ||
); | ||
}; | ||
|
||
export default BlocksItem; |
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 @@ | ||
/** | ||
* Colours tab menu component | ||
*/ | ||
const Colours = () => <p>Colours Tab</p>; | ||
|
||
export default Colours; |
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,6 @@ | ||
/** | ||
* Custom Blocks tab menu component | ||
*/ | ||
const CustomBlock = () => <p>Custom Block Tab</p>; | ||
|
||
export default CustomBlock; |
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 @@ | ||
/** | ||
* Layout tab menu component | ||
*/ | ||
const Layout = () => <p>Layout Tab</p>; | ||
|
||
export default Layout; |
File renamed without changes.
File renamed without changes.
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,24 @@ | ||
/** | ||
* Search component | ||
* | ||
* @param {Object} props Component props | ||
* @param {Function} props.setValue Input on change function | ||
* @param {string} props.placeholder Placeholder attribute value | ||
*/ | ||
const Search = ( { setValue, placeholder = 'Search' } ) => { | ||
const handleSearch = ( event ) => { | ||
setValue( event?.target?.value?.toLowerCase().trim() ); | ||
}; | ||
|
||
return ( | ||
<p className="themer--search-component"> | ||
<input | ||
type="text" | ||
onChange={ ( event ) => handleSearch( event ) } | ||
placeholder={ placeholder } | ||
/> | ||
</p> | ||
); | ||
}; | ||
|
||
export default Search; |
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,43 @@ | ||
/* eslint-disable @wordpress/no-unsafe-wp-apis */ | ||
|
||
import { set } from 'lodash'; | ||
import { __ } from '@wordpress/i18n'; | ||
import { useContext } from '@wordpress/element'; | ||
import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components'; | ||
|
||
import getThemeOption from '../../utils/get-theme-option'; | ||
import EditorContext from '../context/EditorContext'; | ||
import StylesContext from '../context/StylesContext'; | ||
|
||
/** | ||
* Reusable border control style component | ||
* | ||
* @param {Object} props Component props | ||
* @param {string} props.selector Property target selector | ||
*/ | ||
const Border = ( { selector } ) => { | ||
const { themeConfig } = useContext( EditorContext ); | ||
const { setUserConfig } = useContext( StylesContext ); | ||
const value = getThemeOption( selector, themeConfig ); | ||
const colors = getThemeOption( | ||
'settings.color.palette.theme', | ||
themeConfig | ||
); | ||
|
||
const onChange = ( newValue ) => { | ||
let config = structuredClone( themeConfig ); | ||
config = set( config, selector, newValue ); | ||
setUserConfig( config ); | ||
}; | ||
|
||
return ( | ||
<BorderBoxControl | ||
colors={ colors } | ||
label={ __( 'Borders', 'themer' ) } | ||
onChange={ onChange } | ||
value={ value } | ||
/> | ||
); | ||
}; | ||
|
||
export default Border; |
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,8 @@ | ||
/** | ||
* Reusable colour control style component | ||
*/ | ||
const Colour = () => { | ||
return <h3>Colour Component</h3>; | ||
}; | ||
|
||
export default Colour; |
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,8 @@ | ||
/** | ||
* Reusable dimensions control style component | ||
*/ | ||
const Dimensions = () => { | ||
return <h3>Dimensions Component</h3>; | ||
}; | ||
|
||
export default Dimensions; |
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,8 @@ | ||
/** | ||
* Reusable filter control style component | ||
*/ | ||
const Filter = () => { | ||
return <h3>Filter Component</h3>; | ||
}; | ||
|
||
export default Filter; |
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,8 @@ | ||
/** | ||
* Reusable outline control style component | ||
*/ | ||
const Outline = () => { | ||
return <h3>Outline Component</h3>; | ||
}; | ||
|
||
export default Outline; |
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,8 @@ | ||
/** | ||
* Reusable shadow control style component | ||
*/ | ||
const Shadow = () => { | ||
return <h3>Shadow Component</h3>; | ||
}; | ||
|
||
export default Shadow; |
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,8 @@ | ||
/** | ||
* Reusable spacing control style component | ||
*/ | ||
const Spacing = () => { | ||
return <h3>Spacing Component</h3>; | ||
}; | ||
|
||
export default Spacing; |
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,8 @@ | ||
/** | ||
* Reusable typography control style component | ||
*/ | ||
const Typography = () => { | ||
return <h3>Typography Component</h3>; | ||
}; | ||
|
||
export default Typography; |
Oops, something went wrong.