Skip to content

Commit

Permalink
#82 Both sides
Browse files Browse the repository at this point in the history
  • Loading branch information
inc2734 committed Mar 29, 2023
1 parent 4511c25 commit 798003a
Show file tree
Hide file tree
Showing 10 changed files with 327 additions and 147 deletions.
82 changes: 37 additions & 45 deletions patterns/footer-5.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,49 @@

<!-- wp:unitone/both-sides -->
<div data-unitone-layout="both-sides">
<!-- wp:unitone/both-sides-content {"contentWidth":"100%"} -->
<div data-unitone-layout="both-sides__content" style="--unitone--content-width: 100%">
<!-- wp:unitone/responsive-grid {"columnMinWidth":"150px"} -->
<div data-unitone-layout="responsive-grid" style="--unitone--column-min-width:150px">
<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
<!-- wp:unitone/responsive-grid {"columnMinWidth":"150px","unitone":{"flexBasis":"min(100%, var(--unitone--measure))"}} -->
<div data-unitone-layout="responsive-grid" style="--unitone--column-min-width:150px">
<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/responsive-grid -->
<!-- wp:navigation {"overlayMenu":"never","layout":{"type":"flex","justifyContent":"left","orientation":"vertical"}} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- /wp:unitone/responsive-grid -->

<!-- wp:unitone/both-sides-content -->
<div data-unitone-layout="both-sides__content">
<!-- wp:unitone/stack -->
<div data-unitone-layout="stack">
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,<br>sed do eiusmod tempor incididunt ut</p>
<!-- /wp:paragraph -->
<!-- wp:unitone/stack -->
<div data-unitone-layout="stack">
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit,<br>sed do eiusmod tempor incididunt ut</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"openInNewTab":true,"className":"is-style-default","layout":{"type":"flex"}} -->
<ul class="wp-block-social-links is-style-default">
<!-- wp:social-link {"url":"#","service":"twitter"} /-->
<!-- wp:social-link {"url":"#","service":"facebook"} /-->
<!-- wp:social-link {"url":"#","service":"instagram"} /-->
</ul>
<!-- /wp:social-links -->
</div>
<!-- /wp:unitone/stack -->
<!-- wp:social-links {"openInNewTab":true,"className":"is-style-default","layout":{"type":"flex"}} -->
<ul class="wp-block-social-links is-style-default">
<!-- wp:social-link {"url":"#","service":"twitter"} /-->
<!-- wp:social-link {"url":"#","service":"facebook"} /-->
<!-- wp:social-link {"url":"#","service":"instagram"} /-->
</ul>
<!-- /wp:social-links -->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- /wp:unitone/stack -->
</div>
<!-- /wp:unitone/both-sides -->
</div>
Expand Down
32 changes: 14 additions & 18 deletions patterns/header-1row.php
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,24 @@
<div data-unitone-layout="gutters">
<!-- wp:unitone/both-sides {"unitone":{"alignItems":"center","gap":-1}} -->
<div data-unitone-layout="both-sides">
<!-- wp:unitone/both-sides-content -->
<div data-unitone-layout="both-sides__content">
<!-- wp:unitone/stack {"unitone":{"gap":"0"}} -->
<div data-unitone-layout="stack">
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- /wp:unitone/stack -->

<!-- wp:unitone/both-sides-content {"contentMaxWidth":"100%"} -->
<div data-unitone-layout="both-sides__content" style="--unitone--content-max-width:100%">
<!-- wp:navigation {"layout":{"type":"flex","orientation":"horizontal"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s","className":"is-style-unitone"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-submenu {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 1', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 2', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 3', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation-submenu -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- wp:navigation {"layout":{"type":"flex","orientation":"horizontal"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s","className":"is-style-unitone"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-submenu {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 1', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 2', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 3', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation-submenu -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides -->
</div>
Expand Down
32 changes: 14 additions & 18 deletions patterns/header-simple.php
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,24 @@
<div data-unitone-layout="gutters">
<!-- wp:unitone/both-sides {"unitone":{"alignItems":"center","gap":-1}} -->
<div data-unitone-layout="both-sides">
<!-- wp:unitone/both-sides-content -->
<div data-unitone-layout="both-sides__content">
<!-- wp:unitone/stack {"unitone":{"gap":"0"}} -->
<div data-unitone-layout="stack">
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- /wp:unitone/stack -->

<!-- wp:unitone/both-sides-content {"contentMaxWidth":"100%"} -->
<div data-unitone-layout="both-sides__content" style="--unitone--content-max-width:100%">
<!-- wp:navigation {"overlayMenu":"always","layout":{"type":"flex","orientation":"horizontal"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s","className":"is-style-unitone"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-submenu {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 1', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 2', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 3', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation-submenu -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- wp:navigation {"overlayMenu":"always","layout":{"type":"flex","orientation":"horizontal"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s","className":"is-style-unitone"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-submenu {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 1', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 2', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 3', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation-submenu -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides -->
</div>
Expand Down
32 changes: 14 additions & 18 deletions patterns/header-vertical.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,24 @@
<div data-unitone-layout="gutters">
<!-- wp:unitone/both-sides {"unitone":{"alignItems":"center","gap":-1}} -->
<div data-unitone-layout="both-sides">
<!-- wp:unitone/both-sides-content -->
<div data-unitone-layout="both-sides__content">
<!-- wp:unitone/stack {"unitone":{"gap":"0"}} -->
<div data-unitone-layout="stack">
<!-- wp:site-logo /-->
<!-- wp:site-title /-->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- /wp:unitone/stack -->

<!-- wp:unitone/both-sides-content {"contentMaxWidth":"100%"} -->
<div data-unitone-layout="both-sides__content" style="--unitone--content-max-width:100%">
<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s","className":"is-style-unitone"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-submenu {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 1', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 2', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 3', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation-submenu -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides-content -->
<!-- wp:navigation {"layout":{"type":"flex","orientation":"vertical"},"style":{"typography":{"fontWeight":"600"}},"fontSize":"unitone-s","className":"is-style-unitone"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Home', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'About', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-submenu {"label":"<?php esc_html_e( 'Services', 'unitone' ); ?>","url":"#"} -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 1', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 2', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Service 3', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation-submenu -->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Blog', 'unitone' ); ?>","url":"#"} /-->
<!-- wp:navigation-link {"label":"<?php esc_html_e( 'Contact', 'unitone' ); ?>","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:unitone/both-sides -->
</div>
Expand Down
1 change: 1 addition & 0 deletions src/blocks/both-sides-content/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
}
},
"supports": {
"inserter": false,
"className": false,
"anchor": true,
"color": {
Expand Down
28 changes: 21 additions & 7 deletions src/blocks/both-sides/edit.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,34 @@
import classnames from 'classnames';

import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
import {
InnerBlocks,
useBlockProps,
useInnerBlocksProps,
store as blockEditorStore,
} from '@wordpress/block-editor';

import { useSelect } from '@wordpress/data';

export default function ( props ) {
const { clientId } = props;

const hasInnerBlocks = useSelect(
( select ) =>
!! select( blockEditorStore ).getBlock( clientId )?.innerBlocks
?.length,
[ clientId ]
);

export default function () {
const blockProps = useBlockProps();
blockProps[ 'data-unitone-layout' ] = classnames(
'both-sides',
blockProps[ 'data-unitone-layout' ]
);

const innerBlocksProps = useInnerBlocksProps( blockProps, {
templateLock: 'all',
template: [
[ 'unitone/both-sides-content' ],
[ 'unitone/both-sides-content' ],
],
renderAppender: hasInnerBlocks
? InnerBlocks.DefaultBlockAppender
: InnerBlocks.ButtonBlockAppender,
} );

return <div { ...innerBlocksProps } />;
Expand Down
95 changes: 95 additions & 0 deletions src/js/editor/hooks/flex-basis.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { hasBlockSupport } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';

export function hasFlexBasisValue( props ) {
return props.attributes?.unitone?.flexBasis !== undefined;
}

export function resetFlexBasis( { attributes = {}, setAttributes } ) {
delete attributes?.unitone?.flexBasis;
const newUnitone = { ...attributes?.unitone };

setAttributes( {
unitone: !! Object.keys( newUnitone ).length ? newUnitone : undefined,
} );
}

export function useIsFlexBasisDisabled( {
name: blockName,
attributes: { __unstableUnitoneSupports },
} = {} ) {
return (
! hasBlockSupport( blockName, 'unitone.flexBasis' ) &&
! __unstableUnitoneSupports?.flexBasis
);
}

export function FlexBasisEdit( props ) {
const {
label,
attributes: { unitone },
setAttributes,
} = props;

return (
<TextControl
label={ label }
value={ unitone?.flexBasis || '' }
onChange={ ( newValue ) => {
const newUnitone = {
...unitone,
flexBasis: newValue || undefined,
};
if ( null == newUnitone.flexBasis ) {
delete newUnitone.flexBasis;
}

setAttributes( {
unitone: !! Object.keys( newUnitone ).length
? newUnitone
: undefined,
} );
} }
/>
);
}

export function saveFlexBasisProp( extraProps, blockType, attributes ) {
if (
! hasBlockSupport( blockType, 'unitone.flexBasis' ) &&
! attributes?.__unstableUnitoneSupports?.flexBasis
) {
delete attributes?.unitone?.flexBasis;
if (
!! attributes?.unitone &&
! Object.keys( attributes?.unitone ).length
) {
delete attributes?.unitone;
}
return extraProps;
}

if ( undefined === attributes?.unitone?.flexBasis ) {
return extraProps;
}

extraProps.style = {
...extraProps.style,
'--unitone--flex-basis': attributes?.unitone?.flexBasis,
};

return extraProps;
}

export function editFlexBasisProp( settings ) {
const existingGetEditWrapperProps = settings.getEditWrapperProps;
settings.getEditWrapperProps = ( attributes ) => {
let props = {};
if ( existingGetEditWrapperProps ) {
props = existingGetEditWrapperProps( attributes );
}
return saveFlexBasisProp( props, settings, attributes );
};

return settings;
}
Loading

0 comments on commit 798003a

Please sign in to comment.